The modern web is an unpredictable and strange place to develop for

October 10, 2016

Our local support site used to be not all that attractive and also not entirely well organized. Ultimately these descended from the same root cause; that iteration of the site started out life as a wiki (with a default wiki skin), then was converted to plain HTML via brute force when the wiki blew up in our faces. Recently we replaced it with a much nicer version that has a much more streamlined modern design.

As part of that more modern design, it has a menubar along the top with drop-down (sub-)menus for many of the primary options. These drop-downs are done via CSS, specifically with a :hover based style. When I tried the new site out on my desktop it all looked great, but as I was playing around with it a dim light went off in the back of my mind; I had a memory that hover events aren't supported on touch-based systems, for obvious reasons. So I went off to my work iPad Mini (then running iOS 9), fired up Safari, and lo and behold those nice drop-down menus were completely non-functional. You couldn't see them at all; if you touched the primary menu, Safari followed the link. We hacked around with a few options but decided to take the simple approach of insuring that all of the sub-menu links were accessible off the target page of the primary menu.

So far this was exactly what we'd expected. Then one of my co-workers reported that this didn't happen on her iPhone, and it emerged that she used the iOS version of Chrome instead of Safari. I promptly installed that on my iPad Mini, and indeed I saw the same Chrome behavior she did; touching or tapping the primary menu didn't follow the link, it caused the dropdown to appear. Well, okay, that wasn't too strange and it sort of made sense that different browsers might do things slightly differently here (perhaps even deliberately).

(Note that this is slightly weird on iOS because on iOS all browsers use the same underlying engine. So Safari and Chrome are using the same core engine here but are making it behave somewhat differently. The Brave browser has Chrome's behavior.)

Now things get weird. I recently got a latest-generation iPhone; naturally I wound up browsing our (new) support site in it, on Safari, and I tapped one of those primary menus. Imagine my surprise when I got a drop-down submenu instead of having Safari follow the primary menu link. I went back to the iPad Mini, made sure it was updated to the same version of iOS, and tried again. And the behavior wasn't the same as on the iPhone. On the iPad Mini, touching the primary menu followed the link. On the iPhone, touching the primary menu dropped down the sub-menu.

(On the iPhone, I can double-tap the primary menu to follow the link.)

What I took away from this experience is that developing for the modern web is stranger and more unpredictable than I can imaging. I would have never guessed that two iOS devices, running the same iOS version and using the same system browser, would have two different behaviors.

(One implication is that testing things on an iPad Mini is not a complete standin for testing things on an iPhone and vice-versa. This is unfortunate; if nothing else, it makes testing more time-consuming.)


Comments on this page:

By KC Marshall at 2016-10-11 13:27:17:

I think you are experiencing the "3D Touch" feature of the latest iPhone. It can tell how hard you are pressing on the screen and behave differently.

You can see another example if you try to move the "Settings" icon around. If you press lightly, you will get to the mode that lets you move the icon. If you press with medium pressure, the icon will remain clear, but the rest of the icons will go blurry. If you press the "Settings" icon hard, then it will pop-up a context menu to get to important functions (wifi, bluetooth, cell data, and battery) quickly.

By cks at 2016-10-14 12:25:51:

Belatedly: I believe you're right here, and certainly my iPhone 7 behaves differently in Safari for light touches and harder ones (which is actually useful to know for using it, although I'm going to have to play around with this to get used to it, especially since it's different from what I'm used to with the iPad Mini).

Written on 10 October 2016.
« What I think I want out of CPU performance in a new PC
How and why the new iptables -w option is such a terrible fumble »

Page tools: View Source, View Normal, Add Comment.
Search:
Login: Password:
Atom Syndication: Recent Comments.

Last modified: Mon Oct 10 01:03:13 2016
This dinky wiki is brought to you by the Insane Hackers Guild, Python sub-branch.