iPad logged in bug: Have to double tap in the discussion list

nitaaikumar

On latest iPadOS 13.1.3 Safari, if we are logged in as a normal member or an admin, we have to double tap on each row in the discussion list to go to the discussion. This is very cumbersome to say the least. It discourages members who are iPad users from logging in to read the discussions and thus less participation. Also, it makes it difficult for an admin or mod to manage the forum from an iPad.

However, in iPhone Safari and Android Chrome, the normal behavior single tap works to go to a discussion from the discussion list.

I have got it checked from 2 iPads on the discuss.flarum.org and also on my self-hosted Flarum.

So my question is: Why does the single tap work on iPhone after being logged in but it forces us to double tap in the iPad to view a discussion from the list? This double tapping is really quite cumbersome. Considering this non-logged in visitors are better off than logging in. Please do fix this or guide on how to fix this. I am happy to help with any testing needed.

jordanjay29

nitaaikumar Can you screenshot on iPad? Or describe which view you're in: desktop (with the sidebar on the left), tablet (with the normal header bar and the tags list on top of the discussions), or mobile (with the header in the hamburger menu and the tags list in a dropdown menu above)?

010101

You can duplicate this on an iPhone too. Just rotate the phone. It is probably due to the CSS hover effect which is included for wider screen sizes. I bet for small screens like an iPhone, the hover effect is removed which is why it is not an issue on an iPhone in Portrait mode, but it is an issue in landscape mode, and it is an issue on an iPad because the screen is bigger.

nitaaikumar

010101 Oh you are so right, thanks. Can you please give me the css to disable this css hover effect for wider screens so no more double taps on iPad please?

nitaaikumar

jordanjay29 iPadOS now supports the normal desktop view even for the smaller iPad Mini. I can confirm it it is the desktop view with the sidebar on the left. I hope there is some css fix for this. Thanks.

jordanjay29

nitaaikumar Supports or defaults to? The @media queries should switch automatically dependent on screen resolution, unless Safari is now overriding that.

nitaaikumar

jordanjay29 All iPads from the smalest 7.9" iPad Mini now default to the desktop view with the new dedicated iPadOS I think.

There is an another unrelated bug on the now desktop default view in iPads. If the forum title in the header bar is too long or if there are a lot of adjacent horizontal Nav links like on Flarum.org, all the Flarum buttons on the right corner starting from search go down below the top bar and look really out of place on iPad Mini as well as the bigger iPad. It looks quite unprofessional with 360 million iPads already sold.

010101

jordanjay29 iPad screens are basically desktop size these days. The mini is over 1500 pixels wide in portrait. Which means, the mobile CSS Flarum uses doesn’t get triggered on iPads.

Unless someone beats me to it, later tonight I’ll post a temporary CSS fix. It’s got to be the hover. On touch devices hover equals an extra tap many times.

nitaaikumar

010101 Yes, you are right, it must be the hover, because it is ok on the iPhone. Thank you so much. Will wait for your fix, so that I can browse and manage again from my iPad.

010101

nitaaikumar Well, I think I made a good guess but I don’t think it is the hover. The reason is, as you said, it only happens if you are logged in. So the question is: What gets added to the discussion list code for people that are logged in? Is it the slidable content underneath (follow menu)?

I am not sure yet how to fix this. Basically however the discussion list is styled in portrait mode on a mobile device, that is how it needs to be in landscape as well. But, I don’t have time to study the code right now. Sorry.

nitaaikumar

010101 Ok then. I hope someone can help. Thanks for trying. It happens even for members after logging in on the iPad, not only for admins. So it can't be some admin specific code. It must be something which logged in users encounter in the desktop mode but with tapping as in mobile devices.

010101

nitaaikumar Here is the fix, but it cannot be implemented just using this. You need some JavaScript to detect if the device is an iPad. If it is an iPad, then add this CSS:

.DiscussionListItem .Dropdown-toggle.Button {
display: none;
}

Why will this work? It is the discussion list's drop down toggle causing the double tap on iPad. I'll be back with the full solution which will include a JavaScript snippet.

010101

nitaaikumar

Okay, here is the fix. Copy/paste the following CSS into your admin appearance custom CSS box:

.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.

@jordanjay29, FYI. I submitted a github issue. I'm not sure how important this is to everyone else, but we'll see...

flarum/core1913

nitaaikumar

010101 This works like a charm and it fixed it. You are a life-saver. 👍️ Thank you so much. I knew Flarum had something in it which will fix it easily. Call it self-healing lol.

010101

I really want this fixed in Flarum core so I’m necrobumping. I’m calling on everyone with an iPhone or iPad with a spare 15 minutes or so to paste these one at a time in their custom CSS to see which ones fix double tab on iPhones in landscape mode and iPads.

I thought I had a fix (and it works for me) but already it may have mixed results:
flarum/core2561

In my opinion, for this fix one should avoid trying to use screen width sizes. There’s too many screen sizes. That’s why I’m opting for these modern media query features.

A couple of these work for me. But this needs multiple people to test it with all kinds of devices.

If you don’t have an iPhone or iPad (or other touch device) you can still test. You shouldn’t notice anything. If you don’t notice anything (you still have the discussion list item toggle on desktop), then the test is successful.

If you do have an iPhone or iPad, what you should notice is, even in landscape mode, you no longer have to tap twice to open a discussion. To me, any-hover:none makes the most sense. But maybe one of the pointer options is better.

/* One or more available input mechanism(s) 
   can hover over elements with ease */
@media (any-hover: hover) { 
.DiscussionListItem .Dropdown-toggle.Button { 
     display: none;
}
}

/* One or more available input mechanism(s) can hover, 
   but not easily (e.g., many mobile devices emulate 
   hovering when the user performs a long tap) */
@media (any-hover: on-demand) { 
.DiscussionListItem .Dropdown-toggle.Button { 
     display: none;
}
}

/* One or more available input mechanism(s) cannot 
   hover (or there are no pointing input mechanisms) */
@media (any-hover: none) { 
.DiscussionListItem .Dropdown-toggle.Button { 
     display: none;
}
}

/* At least one input mechanism of the device 
   includes a pointing device of limited accuracy. */
@media (any-pointer: coarse) {
.DiscussionListItem .Dropdown-toggle.Button { 
     display: none;
}
}

/* At least one input mechanism of the device 
   includes an accurate pointing device. */
@media (any-pointer: fine) {
    .DiscussionListItem .Dropdown-toggle.Button { 
     display: none;
}
}

/* The device does not include any pointing device. */
@media (any-pointer: none) {
.DiscussionListItem .Dropdown-toggle.Button { 
     display: none;
}
}