Page MenuHomePhabricator

Flex box: Serious rendering issues in header/image captions on mobile IE and old versions of iOS (e..g.iPhone 5S)
Closed, DeclinedPublic

Description

We have been using flexbox a lot. Where it's not avaiable - on iOS and Internet Explorer based devices, there are problems with rendering

  1. The header is unusable

  1. the caption is overlapping the text.

#2018101910000341 reports that image captions overlap with other article text when viewed on InternetExplorer (IE) 11 on Windows Phone 8.1:


(image and version details shared with permission)

IE

A reader in OTRS

iOS

the problem also impacts iOS
In mobile view (not the app), using an iPhone4s with iOS 9.3.5, image captions more than one line long overflow and overlap the following content. The same type of error was seen in all articles I visited on enwp, dewp and svwp.

The screenshot is from https://sv.m.wikipedia.org/w/index.php?title=Xiaoxiang&oldid=43117090
This overflow was not seen using a cellular device with iOS 12.0.1 or Android versions 4.1.2 or 8.0.0.

Developer notes

Visit https://en.m.wikipedia.org/wiki/Igneous_rock on IE11 Windows 10
Can be replicated on browser stack using iPhone+6S 9.0 (Safari) (there the issue is caused by flex: 1 0 100%; rule.)

Fixing overlapping thumbnails (and iOS bug)

IE11 has buggy support for display: flex.
Wrap the display: flex rules inside a feature query. https://caniuse.com/#search=feature%20queries (IE11 does not support feature queries). display: flex is not essential for these rules.
Hopefully this will also fix things for iOS. If not, spin out a new task

other possibilities

We should either drop support for these browsers in JavaScript or use feature queries to find a suitable fallback e.g. display table cell

Event Timeline

Krenair created this task.Oct 21 2018, 10:34 PM
Restricted Application added a subscriber: Aklapper. · View Herald TranscriptOct 21 2018, 10:34 PM
matmarex added a subscriber: matmarex.

I can reproduce the issue on desktop, using IE 11 on Windows 10, after resizing the browser window.

Also, pretty sure the page background should be white, not grey.

Jdlrobson updated the task description. (Show Details)Oct 22 2018, 10:44 PM
Jdlrobson added a project: Readers-Web-Backlog.
Jdlrobson moved this task from Incoming to Triaged but Future on the Readers-Web-Backlog board.
Aklapper updated the task description. (Show Details)Oct 23 2018, 3:07 PM
Jdlrobson added a subscriber: Jdlrobson.

Claimed by Deimos

Niedzielski moved this task from Needs triage to MinervaNeue on the Mobile board.Oct 24 2018, 4:31 PM
ovasileva triaged this task as Normal priority.Nov 6 2018, 3:59 PM
Jdlrobson renamed this task from Rendering problems around image captions on mobile IE to Flex box: Rendering problems around image captions on mobile IE.Nov 6 2018, 10:12 PM
Jdlrobson renamed this task from Flex box: Rendering problems around image captions on mobile IE to Flex box: Rendering problems around image captions on mobile IE and iOS.
Jdlrobson updated the task description. (Show Details)
JohanahoJ updated the task description. (Show Details)Jan 31 2019, 11:30 PM
This comment was removed by Aklapper.

Change 492005 had a related patch set uploaded (by Jdlrobson; owner: Jdrewniak):
[mediawiki/skins/MinervaNeue@master] Adds a CSS rule that defines the <main> element for old IE.

https://gerrit.wikimedia.org/r/492005

Change 492005 merged by jenkins-bot:
[mediawiki/skins/MinervaNeue@master] Adds a CSS rule for <main> element to support IE11 and under.

https://gerrit.wikimedia.org/r/492005

Jdlrobson updated the task description. (Show Details)
Jdlrobson updated the task description. (Show Details)
Jdlrobson renamed this task from Flex box: Rendering problems around image captions on mobile IE and iOS to Flex box: Rendering problems around image captions on mobile IE and iOS cause overlapping text.Mar 5 2019, 6:16 PM
Jdlrobson updated the task description. (Show Details)
Jdlrobson renamed this task from Flex box: Rendering problems around image captions on mobile IE and iOS cause overlapping text to Flex box: Image captions overlap thumbnail on mobile IE and old versions of iOS.Apr 9 2019, 4:50 PM
Jdlrobson lowered the priority of this task from Normal to Low.Wed, Jul 31, 6:53 PM
Jdlrobson renamed this task from Flex box: Image captions overlap thumbnail on mobile IE and old versions of iOS to Flex box: Serious rendering issues in header/image captions on mobile IE and old versions of iOS.Mon, Aug 5, 5:42 PM
Jdlrobson raised the priority of this task from Low to Normal.
Jdlrobson updated the task description. (Show Details)
Jdlrobson renamed this task from Flex box: Serious rendering issues in header/image captions on mobile IE and old versions of iOS to Flex box: Serious rendering issues in header/image captions on mobile IE and old versions of iOS (e..g.iPhone 5S).Mon, Aug 5, 5:47 PM
Jdlrobson updated the task description. (Show Details)
Jdlrobson updated the task description. (Show Details)

@Niedzielski is leading a discussion on browser support which should give more clarity about whether these are browsers we plan to support.

Niedzielski closed this task as Declined.Wed, Aug 7, 5:06 PM

From the ticket, it's my understanding this bug impacts IE11 and iOS < v12. From the compatibility table, it's my understanding that we provide grade C support iOS >= v7. I don't know what version of desktop IE we support, so I picked IE11. With the regex, (iPhone OS [789]_)|(MSIE 11), it's my understanding that this bug impacts up to .002% of the 1.9B pageviews recorded in the last year and that this number will only decrease. Given our other priorities, I think it's unlikely that this issue will be fixed before these devices disappear completely so I'm regretfully declining this task. /cc @ovasileva @alexhollender @phuedx, please reopen if this is a priority.