Page MenuHomePhabricator

Weird CSS tooltip behaviour on iOS devices
Open, Needs TriagePublic

Description

As already discussed here (for excluding problems with TemplateStyles), I have encountered some weird behaviour exclusively on iOS devices (tested with iPod touch and iPad) related to CSS tooltips. For testing I have now strictly followed a sample CSS code from this page, since the tooltips there work on all my devices without problems. My current testing environment is this sandbox, which uses this stylesheet. I found the following problems:

  1. very sticky tooltips: tooltip does not vanish when tapping somewhere outside (works only if I tap outside of the page content, basically within the grey area below the toolbars of desktop version); normal behaviour on Android phone; problem on iOS devices, only desktop version;
  2. if container area is only text, iOS devices in desktop version show no tooltip at all, it needs to be a link or an image; but again, the demo version, which uses only text, works also on iOS devices;
  3. weird caption jumping: if in a table (not necessarily wikitable), the caption jumps downwards when tapping the tooltip container; happens in (1) mobile version on iPad, (2) desktop version on iPod and iPad; in the current example though this original behaviour has changed slightly, the jumping now happens mainly when I am tapping the grey area for getting rid of the tooltip.

For my templates on German WP that use such tooltips, the only relevant problem is the first one, since the template uses no table caption and all the container areas are icons; but I feel like these are all symptoms of a general MediaWiki CSS incompatibility with iOS. Since it works in the mobile version (except caption jumping on iPad) and the demos on the other website work as well (no idea about caption jumping though), I think there must be a solution (even though weird behaviour of :hover in iOS has long been known).

Event Timeline

Restricted Application added a subscriber: Aklapper. · View Herald TranscriptDec 25 2018, 11:59 AM

Hi, what makes this a MediaWiki issue? Does your custom CSS/HTML code behave differently when using it in, say, static HTML? If so, how?

Well, as described above, the exact same HTML/CSS apparently works fine on the external website I have linked, the problems are only visible in MediaWiki (I have tested German WP and Testwiki). I can also try it on my personal website, if further testing is required, but the different behaviour on the website that presents the code explicitly as a generally applicable demo seems proof enough to me.

With which exact browser(s) was this tested?

On iOS usually with Safari, but I also tried Chrome (same behaviour).

Issues 1 and 2 are explained by the fact that iOS Safari only supports hover effects on "clickable" elements (https://stackoverflow.com/questions/17188558/what-is-the-default-way-an-ios-device-handles-the-hover-pseudo-class). This is presumably also why you can't un-hover the element by tapping somewhere else (since whatever you are tapping is not "clickable", so the hover effect stays where it was). I'm not sure which elements exactly it considers "clickable", but hopefully this helps you investigate.

Issue 3 seems like a bizarre browser bug in Safari (I could reproduce it) and I can only recommend trying to remove rules from your CSS until you find which one magically causes it. I spent a few minutes trying it and did not find an obvious solution.

I don't think either of these problems are issues in MediaWiki.

Generally, I would recommend just not using hover effects. They are difficult to work with on mobile, as you discovered, but can also pose problems to users of screen-readers and to users who are just not that familiar with using computers. If you want the content to be accessible to all of Wikipedia's readers, I suggest just writing it as plain text next to the icon.

Thanks for looking into it! Well, if it is a general iOS problem, why doesn’t it happen on the external website and why only in WP desktop version and not in mobile version? Otherwise I wouldn’t have asked it here. And the caption jumping is definitely not a Safari bug, since it also happens in Chrome; furthermore, I would expect to find trace of such a bug on some other support/discussion site if it were a general one (probably captions are not that often used, but still). So I’m not convinced that there is nothing to do on the side of MediaWiki.

About using hover in general: well, in my case the users were always hiding the information in the title tooltips, which made it completely inaccessible for mobile readers. Now it has become generally accessible, which is a huge improvement, even though iOS users will encounter some bugs. Oh, and about screen readers: the information is also contained in the alt attribute of the image, so I wouldn’t worry about that.

Thanks for looking into it! Well, if it is a general iOS problem, why doesn’t it happen on the external website and why only in WP desktop version and not in mobile version? Otherwise I wouldn’t have asked it here.

I don't know, but I would guess that these sites have implemented something that makes it work, either intentionally or accidentally. Maybe they have a global click event handler for some reason, making everything "clickable", or maybe they override something about scrolling that accidentally changes what tapping does.

If you want to prove it's a MediaWiki problem, please create a small stand-alone .html file that implements the same feature and does not have the problems.

And the caption jumping is definitely not a Safari bug, since it also happens in Chrome; furthermore, I would expect to find trace of such a bug on some other support/discussion site if it were a general one (probably captions are not that often used, but still). So I’m not convinced that there is nothing to do on the side of MediaWiki.

All browsers on iOS use Safari's WebKit rendering engine, including Chrome and Firefox. Apple does not allow apps using other browser engines on their app store.

I regularly run into new browser bugs that are not documented anywhere on the Internet, at least a few a year. Many of those are related to VisualEditor's editing features, which depend on browser features that are definitely very rarely used, but there are others. Speaking of iOS Safari in particular, earlier this month I had to work around a bug where chunks of content would disappear after you tried to scroll it (mentioned in the comments on https://gerrit.wikimedia.org/r/c/oojs/ui/+/474839/), that I could not find anything about anywhere. I think table captions are easily rare enough to cause funny issues when combined with some rare CSS rules.

I don't know, but I would guess that these sites have implemented something that makes it work, either intentionally or accidentally. Maybe they have a global click event handler for some reason, making everything "clickable", or maybe they override something about scrolling that accidentally changes what tapping does.
If you want to prove it's a MediaWiki problem, please create a small stand-alone .html file that implements the same feature and does not have the problems.

Okay, I will try that on my personal website later! But if it apparently can be “corrected” (by CSS or more likely JS, I assume), I guess MediaWiki should do the same, otherwise iOS users seem disadvantaged to me (and again, the mobile version works, so it seems that there has already been found a partial solution).

XanonymusX added a comment.EditedDec 28 2018, 10:18 PM

So I created this testing environment, using only the tooltip-related styles: http://danu-talis.bplaced.net/tooltip-test.html (first with the styles I use on testwiki, then with the ones I use on German WP). You are right, it behaves exactly like it does in MediaWiki environment. Btw, I also found out that when using Firefox on iOS, the sticky tooltips problem is resolved, but the caption still jumps.

That being cleared, I guess this becomes a feature request rather than a bug report (excluding problem #3, which is definitely an iOS bug): for the convenience of users on mobile devices, MediaWiki should be able to handle :hover events in iOS not just in the mobile version, but also in the desktop version (at least when the device is recognised as mobile/tablet). I guess that is done with JS, but I haven't been able to find out the exact way to do it yet (and it remains a mystery why it has been fixed for the mobile version but not for the desktop version); maybe I'll get there with further tests on my website. Also e.g. https://www.w3schools.com/css/css_tooltip.asp seems to use a JS event handler, since also there the tooltips work anywhere.

Where can I see the JS that is currently used in the mobile version of Wikipedia / Testwiki? Maybe the fix becomes clear already from that. And: what exactly happens when tapping the grey area below the tools section? It apparently works as a closing event (while also causing some of the caption jumping).

Where can I see the JS that is currently used in the mobile version of Wikipedia / Testwiki?

@XanonymusX: Use your web browser's developer tools (Safari; Chrome) in combination with the URL parameter debug=true on https://test.m.wikipedia.org/