Double tap on iOS #2015

New Issue

danstewart · 2023-02-25T16:57:55Z

danstewart commented

2023-02-25 16:57:55 +00:00

Description

Hi,

Is it intentional that some things need a two taps on iOS?

eg.

Projects in the side bar
Tasks in the list view

Vikunja Frontend Version

0.20.3

Vikunja API Version

0.20.2

Browser and version

Safari iOS 16.3.1

Can you reproduce the bug on the Vikunja demo site?

Yes

Screenshots

No response

### Description Hi, Is it intentional that some things need a two taps on iOS? eg. - Projects in the side bar - Tasks in the list view ### Vikunja Frontend Version 0.20.3 ### Vikunja API Version 0.20.2 ### Browser and version Safari iOS 16.3.1 ### Can you reproduce the bug on the Vikunja demo site? Yes ### Screenshots _No response_

vikunja-issue.mp4

290 KiB

danstewart added the

kind/bug

label 2023-02-25 16:57:55 +00:00

danstewart commented

2023-02-25 17:18:55 +00:00

I think it may be a CSS issue, I found this:
https://css-tricks.com/annoying-mobile-double-tap-link-issue/

As a lazy test I stripped out :hover from all of the CSS on my instance and it fixed the issue.

I'll get vikunja set up locally at some point and come up with a proper fix.

I think it may be a CSS issue, I found this: https://css-tricks.com/annoying-mobile-double-tap-link-issue/ As a lazy test I stripped out `:hover` from all of the CSS on my instance and it fixed the issue. I'll get vikunja set up locally at some point and come up with a proper fix.

konrad commented

2023-02-27 09:57:30 +00:00

It's not intentional.

danstewart commented

2023-02-27 10:02:08 +00:00

It's not intentional.

Great, I'll submit a fix when I get some time.

Looks like the issue is because the star button is shown on hover.
Was thinking on mobile it should just always be shown.

Let me know if you have a better suggestion.

Thanks

> It's not intentional. Great, I'll submit a fix when I get some time. Looks like the issue is because the star button is shown on hover. Was thinking on mobile it should just always be shown. Let me know if you have a better suggestion. Thanks

👍 1

konrad commented

2023-02-27 10:50:00 +00:00

Looks like the issue is because the star button is shown on hover.
Was thinking on mobile it should just always be shown.

That sounds like it could work. I'd love a PR!

> Looks like the issue is because the star button is shown on hover. Was thinking on mobile it should just always be shown. That sounds like it could work. I'd love a PR!

dpschen commented

2023-02-27 15:42:22 +00:00

Seems like the way to do it now is to combine the queries:

@media(hover: hover) and (pointer: fine) {
	/* [...] */
}

See https://medium.com/@mezoistvan/finally-a-css-only-solution-to-hover-on-touchscreens-c498af39c31c

Support seems fine these days.

Seems like the way to do it now is to combine the queries: ```css @media(hover: hover) and (pointer: fine) { /* [...] */ } ``` See https://medium.com/@mezoistvan/finally-a-css-only-solution-to-hover-on-touchscreens-c498af39c31c Support seems fine these days.

👍 1

dpschen commented

2023-02-27 15:47:35 +00:00

Digging a bit deeper: I'm a bit unsure how the the use tablets (especially iPads) together with stylus aka Apple Pencil changes this.

See also this thread that seems to keep track of these changes:
https://twitter.com/meduzen/status/1051542796954415107

Digging a bit deeper: I'm a bit unsure how the the use tablets (especially iPads) together with stylus aka Apple Pencil changes this. See also this thread that seems to keep track of these changes: https://twitter.com/meduzen/status/1051542796954415107

👍 1

danstewart commented

2023-02-27 15:53:41 +00:00

Looks like for iPads with the apple pencil the hover check would be false then we would just show the star and overflow menu button, which seems fine to me.

Alternatively we could remove the hover entirely and just always show the star and overflow menu button, though I think the current design is nice on desktop.

I have a few devices I can test with (though not an iPad which supports the apple pencil) so I will add some notes of the various devices when I raise the PR.

Looks like for iPads with the apple pencil the hover check would be `false` then we would just show the star and overflow menu button, which seems fine to me. Alternatively we could remove the hover entirely and just always show the star and overflow menu button, though I think the current design is nice on desktop. I have a few devices I can test with (though not an iPad which supports the apple pencil) so I will add some notes of the various devices when I raise the PR.

dpschen commented

2023-02-27 16:01:28 +00:00

In some projects I also used this trick:

I assume the device doesn't support touch. So we support hover initially.
We have a general listener for touch events on the body with capture, once and passive set as true. If that listener is fired we add a class to the body that indicates touch support. We can use that class in links to check for support.

In some projects I also used this trick: 1) I assume the device doesn't support touch. So we support hover initially. 2) We have a general listener for touch events on the body with `capture`, `once` and `passive` set as `true`. If that listener is fired we add a class to the body that indicates touch support. We can use that class in links to check for support.

👍 1

konrad commented

2023-02-27 16:11:54 +00:00

Alternatively we could remove the hover entirely and just always show the star and overflow menu button, though I think the current design is nice on desktop.

I think we should definitely keep that. Better remove it for devices like the ipad when so that it works most of the time and differently for ipads.

I have an ipad with a pencil and could test this. I wouldn't say that's high on the priority list though.

> Alternatively we could remove the hover entirely and just always show the star and overflow menu button, though I think the current design is nice on desktop. I think we should definitely keep that. Better remove it for devices like the ipad when so that it works most of the time and differently for ipads. I have an ipad with a pencil and could test this. I wouldn't say that's high on the priority list though.

👍 2

danstewart referenced a pull request from vikunja/frontend that will close this issue

2023-03-03 18:00:37 +00:00

fix: stop revealing elements on hover if hover is not supported #3191

konrad closed this issue

2023-03-04 16:13:33 +00:00

konrad referenced this issue from a commit

2023-03-04 16:13:33 +00:00

fix: stop revealing elements on hover if hover is not supported (#3191)

konrad referenced this issue from a commit

2024-02-07 14:00:34 +00:00

chore(deps): update dependency cypress to v10 (#2015)