Twenty Fourteen: Featured Content Slider problems in IE10+ with touch

[celloexpressions]

Copied over from #26189 (screenshots available there)

IE 9 Mobile (Windows Phone 7.5)

• Surprisingly, only one issue: no Genericons. We might want to consider adding fallbacks for the menu and search icons; I think the others are non-essential. In Twenty Thirteen the search icon was a png at least, and we had more colors to deal with (#23985).

IE 10 Mobile (Windows Phone 8)

• When featured content slider is in use, impossible to scroll down the homepage in landscape mode (swiping up and down moves the slider, but doesn't scroll and the slider and header fill the entire screen). Can sometimes get past it by pulling down, then quickly up on the header area and relying on kinetic scrolling.
• It takes a very particular technique to avoid the link being activated instead of activating the slider when swiping left/right on the homepage featured content area. The link is almost always activated instead.

IE 11 "Immersive" (Windows 8.1)

• Same slider interaction issue as above -- swiping results in triggering the link unless you go super slow.
• Touch targets are generally good, but I consistently have trouble with the category links. I think we need to either add some more spacing or bump the font size there to optimize the experience for touch users (literally everywhere else was good).

[lancewillett]

What severity would you attach to these? Can we fix after 3.8, like in minor release later?

[iamtakashi]

Replying to celloexpressions:

• Touch targets are generally good, but I consistently have trouble with the category links. I think we need to either add some more spacing or bump the font size there to optimize the experience for touch users (literally everywhere else was good).

I don't find it tricky to tap category links (unless the category name is just one letter or few letters). They are least important element in there anyway. I think it's ok to leave as it is.

[celloexpressions]

Replying to iamtakashi:

I don't find it tricky to tap category links (unless the category name is just one letter or few letters). They are least important element in there anyway. I think it's ok to leave as it is.

I think the key distinction for that is on smaller devices (phone/tablet) versus bigger ones (laptops, desktops). However, at this point I don't think it's worth a design change to address, and it isn't a very important issue. To clarify, the issue is with the vertical spacing, but it does visually reflect their un-importance.

[celloexpressions]

Replying to lancewillett:

What severity would you attach to these? Can we fix after 3.8, like in minor release later?

Splitting out each issue (maybe I should have divided this even further into separate tickets...):

• IE9 Mobile - no Genericons: lowest priority, major severity. It's pretty staightforward, just add the two icons in, but since it adds files we may want to do it now.
• IE10 Mobile Slider Scrolling: normal priority, critical severity. This makes most of the homepage inaccessible if the slider area is taller than the window (happens most frequently in landscape mode). I think we need to fix this before release.
• IE10 & 11 Slider Swiping/Link Targeting: low priority, normal severity. This is extremely annoying and leads to a confusing user experience in combination with the previous bug. I have a feeling we can fix both at the same time. Swiping to navigate the slider doesn't work on IE9 Mobile, which is why it's unsupported there.
• Touch targets: let's wontfix that issue, since it's so subjective anyway.

Also just noticed an additional issue:

• Menu toggle doesn't display on IE10 Mobile: normal priority, critical severity. Menu is inaccessible, can't tell why. The menu itself does show up in landscape, there's just a black gap (unlinked) normally, though. We need to9 figure this out ASAP, as well.

[lancewillett]

OK, we need some patches, please. Otherwise we'll need to punt these until the next Twenty Fourteen release, after 3.8 and closer to 3.9.

[celloexpressions]

Replying to lancewillett:

OK, we need some patches, please. Otherwise we'll need to punt these until the next Twenty Fourteen release, after 3.8 and closer to 3.9.

I could do the fallback icons if we want to do those (let's go with whatever's decided for core, see #26369), and I'll look into the menu toggle display issue tonight. I have no idea about the JS ones, but those are the most critical, perhaps @obenland can take a look? Or anyone else, feel free to jump in!

[lancewillett]

In 26661:

Twenty Fourteen: partial revert of r26558 to avoid blocking access to the Menu Toggle in IE when in small viewports. See #26189 and #26379.

[blankthemes]

adds conditional to fix menu-toggle to IE

[lancewillett]

If we're OK with one more IE hack in style.css we can apply 26379.diff and go back to the visibility fix before r26661. That would make it work across the majority of devices and browsers.

I'd love to avoid the hack and figure out a way to make it work in Kindle with a different technique.

[iandstewart]

If we do apply the patch with a hack it deserves a comment

/* Small hack for IE -- patches welcome for removing it! */

[lancewillett]

Let's punt the rest of the IE issues since they are non-critical, and address after 3.8 is out to polish up the experience on Windows mobile devices.

We'll also need to keep trying for a Kindle menu text fix.

[celloexpressions]

I don't think we need to worry about IE9 Mobile Icons at this point, so it looks like the remaining issues can all be traced to the Featured Content Slider issue.

Basically, because the touch interactions in IE are inconsistent, you can end up stuck at the top of the homepage in landscape orientation on small screens. Swiping up/down (to scroll) flips through the posts in the slider, while swiping left/right triggers the post link instead of moving the slider. Someone familiar with the slider JS will need to dive into this one.

[karmatosed]

This has sat for a while now. Things have moved on and does anyone know a non-hack / comment way of getting a patch for this?

[celloexpressions]

IE has been with Edge for desktop and mobile in Windows 10, and testing there on desktop, swiping the slider doesn't work, but it also doesn't trigger the link when swiping over it, so I think this is okay. It works perfectly with swipe-navigation and no bugs that I could find on Edge mobile with Windows 10 on a phone. Since we don't have a patch for the older IE issues or the current Edge desktop/touch issue, we can probably close this ticket for now.

[karmatosed]

@celloexpressions ok, great. Closing now after feedback, thanks all.