Core: Touch devices of certain widths forced to double tap to open discussion

[zerosonesfun]

Bug Report

Current Behavior
Touch devices of certain widths are forced to double tap to open discussions. This is because the CSS media rules only work up to a certain number of pixels. Which works fine for most mobile devices in Portrait mode. However, on an iPhone for example, if you rotate to Landscape, or if you use an iPad in Portrait or Landscape, then the "mobile" version of the site is not used and it takes two taps to open a post. This is because you are served the regular desktop version of the site which includes the three dot toggle menu to the right of each post in the discussions list and the way things are currently coded, the first tap on a touch device does not go into the discussion probably because it is wondering if you are trying to instead open the drop down toggle menu.

This toggle menu is not needed on touch devices no matter the width because the slide to toggle feature works on touch devices even if the normal desktop CSS is being served.

See end of post for possible solution.

Steps to Reproduce

1. Using an iPhone in landscape mode or an iPad go to any Flarum forum.
2. Tap a discussion in the discussions list.

Expected Behavior
One tap should open the discussion.

Screenshots
I don't think screenshots are truly needed for this report.

Environment

• Any iOS environment and most likely any other touch environment. Browser doesn't matter. This happens in Safari iOS, Chrome iOS, and Firefox iOS.

Possible Solution
The exact solution is up to core devs, but a temporary fix for current Flarum webmasters is to copy and paste the following CSS into their custom CSS:
~
.DiscussionListItem .Dropdown-toggle.Button {
display: none;
}
.no-touch .DiscussionListItem .Dropdown-toggle.Button {
display: block;
}
~

What is this doing? If a "no-touch" device (a regular desktop computer) is detected display the drop down toggle as normal (display:block). This is possible because Flarum already conveniently adds "no-touch" to the body tag with non-touch devices. And then the display:none part of the above CSS ensures the toggle button is not displayed with touch devices. You can still slide to toggle on touch devices, but the 3 dot toggle is hidden which fixes the double tap issue.

[OrdinaryJellyfish]

I remember reading about this somewhere. It's intended behavior in iOS, though it can get annoying depending on the use case. Android doesn't do this, as it fires the click event on the first tap as well as hover. Further reading: https://css-tricks.com/annoying-mobile-double-tap-link-issue/

[zerosonesfun]

I remember reading about this somewhere. It's intended behavior in iOS, though it can get annoying depending on the use case. Android doesn't do this, as it fires the click event on the first tap as well as hover. Further reading: https://css-tricks.com/annoying-mobile-double-tap-link-issue/

I also sometimes wonder if the last point in this article is the way to go... "It's probably best to just not rely on hover to reveal anything." Hover makes the desktop experience a little better and "cooler," but if one wants to 100% ensure their website works well on all devices with no extra taps, it seems like hover's gotta go. That'd be a pretty big change for Flarum though so probably not a good idea to go that route. :)

[franzliedke]

The @media (pointer: fine) solution explained in the article seems like a fair solution?

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. We do this to keep the amount of open issues to a manageable minimum.
In any case, thanks for taking an interest in this software and contributing by opening the issue in the first place!

[dartrax]

Seems to be fixed with beta 14. I found that very annoying in the past, fortunately I could not reproduce at https://nightly.flarum.site/

[askvortsov1]

@zerosonesfun Could you confirm?

[dartrax]

Does not work in the notification dropdown. New notifications get a Checkmark ✔️ with first tap and will be opened with second. After that (when they are not unread any more) they open right at first tap.

[zerosonesfun]

@zerosonesfun Could you confirm?

No this is not fixed. It has always worked in portrait mode. But on iPhone as one example when you rotate the phone to landscape, it takes a double tap to open a discussion.

I still have to use the following CSS patch to fix it:

~
/* Fix double tap to open discussion on touch devices */
.DiscussionListItem .Dropdown-toggle.Button {
display: none;
}
.no-touch .DiscussionListItem .Dropdown-toggle.Button {
display: block;
}
~

[dartrax]

@zerosonesfun What iPhone do you use?
I think we need to specify this more in detail because it may have been partly (for some) iphones/ipads been solved.

beta13:
iPhone 7 portrait - could Not reproduce (except notification list)
iPhone 7 landscape - could Not reproduce (except notification list)
iPhone XS portrait - could reproduce
iPhone XS landscape - could reproduce
iPad Air 2 portrait - could reproduce
iPad Air 2 landscape - could reproduce

beta14:
iPhone 7 portrait - could Not reproduce (except notification list)
iPhone 7 landscape - could Not reproduce (except notification list)
iPhone XS portrait - could Not reproduce (except notification list)
iPhone XS landscape - could Not reproduce (except notification list)
iPad Air 2 portrait - could Not reproduce (except notification list)
iPad Air 2 landscape - could Not reproduce (except notification list)

This is the viewport size of my devices with my settings:
Those were detected by viewportsizer.com
iPhone 7 portrait - 375 x 553
iPhone 7 landscape - 667 x 375
iPhone XS portrait - 500 x 847
iPhone XS landscape - 965 x 500
iPad Air 2 portrait - 768 x 898
iPad Air 2 landscape - 1024 x 642

[zerosonesfun]

iPhone XR. Landscape is: 1792 x 828 px

The thing is, there could always be a phone out there now or in the future that has just the right amount of pixels to reproduce this. Ensuring the drop down toggle is hidden for mobile fixes this no matter the width/pixels.

I also think this is more important than the notifications issue since this could prevent someone from opening a discussion. The most basic part of a forum.

[dartrax]

That‘s true. In this case I agree that it‘s not fixed, only it does not appear on my particular devices any longer. If I upgrade my devices hardware, I would probably face this issues again, as my visitors would. So I‘ll include your CSS when my flarum goes public :-)

I also think this is more important than the notifications issue since this could prevent someone from opening a discussion. The most basic part of a forum.

I agree!

[askvortsov1]

I'm having issues replicating this on my device, but definitely agree this would be good to fix. Does this happen when clicking anywhere on the discussion list item, or only on the right hand size? Also, does it happen for any click, or just for long presses that could be considered "selecting" the item without clicking it?

[dartrax]

Anywhere and short clicks. I‘ve made a video of the iPad 2, hopefully the link works.

https://share.icloud.com/photos/0crVR0XFYZcrjJielJ3lO87oQ

[zerosonesfun]

It boils down to the fact that Flarum uses a lot of hover effects and hover causes double tapping on touch devices. I know it may seem boring, but I personally try to avoid hover effects all together these days. But I also like very minimal design.

There’s a link to possible solutions above where Franz mentions @media (pointer: fine). Or, there’s these: https://stackoverflow.com/questions/23885255/how-to-remove-ignore-hover-css-style-on-touch-devices

A nuclear option is ignoring all hover styles completely on smaller screens. As long as that wouldn’t break anything.

Or, the CSS I posted above, although it may not be glamorous, works great (at least for the discussion double tap and as long as no one ever removes the “no-touch” class from core).

[askvortsov1]

I just tried this out, and from a UX perspective disabling hover for discussion items and notifications on devices without a mouse makes the most sense to me. We'd need to make Notification list items slidable though so that they could still be dismissed. Anyways, I'm in favor of making this change.

[askvortsov1]

Adding to the milestone so it doesn't get lost, but can definitely be done before then.