Language selector and edit button icon not displayed on first load in iOS 13
Closed, ResolvedPublic
Actions

Assigned To

Authored By

	siebrand
	Sep 22 2019, 1:28 PM

Description

I’m using iOS 13.0 on iPhone 11.

Open safari, ensure no tabs are open and type a Wikipedia URL.
Visit the page

Observe presence of language selector and edit link. Unexpected: they are absent.

Reload the page. Observation: links are present.

Also replicated:

iOS: 12.3.2
Chrome: 77.0.3865.103

no anything

no main menu

macOS 10.14.6
Chrome 77.0.3865.90

no watchlist

Screen Shot 2019-10-02 at 8.26.26 PM.png (1×990 px, 313 KB)

QA instructions

October 9, 2019

Go to the main page on enwiki from a variety of iOS devices
Ensure the bug does not appear after navigating through to a couple of pages

October 10, 2019

Go to the main page on a couple of non-English wikis from a variety of iOS devices
Ensure the bug does not appear after navigating through to a couple of pages

AC	Status	Device	iOS Version	Details
1	❌	iPhone 5s	7	T233521#5565518 T233521#5565549
2	❌	iPhone 6	8	T233521#5565518 T233521#5565549
3	✅	iPhone 6s Plus	9	T233521#5565518
4	✅	iPhone 7	10	T233521#5565518
5	✅	iPhone 8	11	T233521#5565518
6	✅	iPhone XR	12	T233521#5565518
7	✅	iPhone XS	13	T233521#5565518
8	❌	iPad Air	7	T233521#5565518 T233521#5565549
9	❌	iPad Air 2	8	T233521#5565518 T233521#5565549
10	✅	iPad 6	11	T233521#5565518
11	✅	iPad Mini 2019	12	T233521#5565518
12	✅	iPad Pro 12.9	13	T233521#5565518

these cases were declined per T207618

Details

	Project	Branch	Lines +/-	Subject
	mediawiki/skins/MinervaNeue	wmf/1.35.0-wmf.1	+14 -6	Adding a static width/height for mw-ui-icon background images.
	mediawiki/skins/MinervaNeue	master	+14 -6	Adding a static width/height for mw-ui-icon background images.

Customize query in gerrit

Related Objects

Mentioned In: T281353: Broken image in the hint to the settings link on mobile view
T235092: Visible glitch when switching page (flushCssBuffer makes the page blink at every page change)
T232842: Certain icons not appearing on mobile and desktop (main menu, watch, language)
Mentioned Here: T207618: Flex box: Serious rendering issues in header/image captions on mobile IE and old versions of iOS (e..g.iPhone 5S)
T232260: Hamburger and notifications menu icons arehidden in mobile view of RTL languages in Chrome

Event Timeline

siebrand created this task.Sep 22 2019, 1:28 PM

Restricted Application added a subscriber: Aklapper. · View Herald TranscriptSep 22 2019, 1:28 PM

siebrand added subscribers: Krinkle, Amire80.Sep 22 2019, 1:28 PM

T233521-load-first.JPG (1×591 px, 145 KB)

T233521-load-second.JPG (1×591 px, 145 KB)

added as attachments.

siebrand added projects: Mobile, Language-Team, Editing-team.Sep 22 2019, 1:40 PM

This sounds like another variant of T232260. Is it reproducible on the beta cluster?

Jdlrobson moved this task from Needs triage to MobileFrontend specific on the Mobile board.Sep 27 2019, 6:28 PM

Aklapper added a project: MobileFrontend.Sep 29 2019, 9:34 PM

Krinkle removed a subscriber: Krinkle.Oct 1 2019, 5:32 PM

ovasileva triaged this task as High priority.Oct 2 2019, 8:47 AM

ovasileva edited projects, added Readers-Web-Backlog (Kanbanana-2019-20-Q2); removed Readers-Web-Backlog.

I still cannot replicate this, so I honestly feel this was a caching issue relating to recent changes performance team regarding embedding icons and we made (changing icons). It's not worth exploring any further unless we are getting a lot of complaints about and I don't think it's high priority.

ovasileva mentioned this in T232842: Certain icons not appearing on mobile and desktop (main menu, watch, language).Oct 2 2019, 6:24 PM

@Jdlrobson - Was not able to reproduce exact bug, but ran into the following:
iOS: 12.3.2
Chrome: 77.0.3865.103
no anything

no main menu

macOS 10.14.6
no watchlist

I've tried debugging this issue and I was able to locate an affected page (GW501516 in my case) and inspect it from my iPhone using the Safari inspector.

There are no network errors in the console. The browser loads the correct image URL, so this isn't a caching issue.

The element itself exists in the DOM, but the :before pseudo-element is getting zero width and zero height, whereas the other icons are getting the correct 20px width and height.

When comparing the watch star with the edit icon, I saw one difference in the CSS


watchstar	edit

For some reason, the watchstar was getting a display:flex and thus zero width and height. Why?

Screen Shot 2019-10-02 at 21.53.12.png (2×2 px, 1 MB)

Screen Shot 2019-10-02 at 21.53.15.png (2×2 px, 1 MB)

It looks like the watchstar icon is being affected by the .client-js .jsonly rule, whereas the other icons are not. Could this be because of the loading order?

I was able to replicate this on the same GW501516 page on Safari desktop:

I think adding a min-width/min-height to .mw-ui-icon:before can fix this.

Screen Shot 2019-10-02 at 22.16.15.png (926×1 px, 344 KB)

Change 540479 had a related patch set uploaded (by Jdrewniak; owner: Jdrewniak):
[mediawiki/skins/MinervaNeue@master] Ensuring width/height on mw-ui-icon when display: flex;

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

gerritbot added a project: Patch-For-Review.Oct 2 2019, 8:24 PM

Jdlrobson closed this task as a duplicate of T232842: Certain icons not appearing on mobile and desktop (main menu, watch, language).Oct 2 2019, 9:56 PM

Making this the canonical bug

Jdlrobson merged a task: T232842: Certain icons not appearing on mobile and desktop (main menu, watch, language).Oct 3 2019, 4:25 PM

Jdlrobson added a subscriber: • alexhollender_WMF.

So I've been able to replicate both the hamburger and search icon missing on my iphone test device (iOS 12.0). Although all the following screenshots are from my local dev instance, I've also seen it on en wiki. Here is a screenshot locally and comparisons between the .mw-ui-icon element, the :before element, and the network request for when the hamburger icon shows and doesn't show:

	Hamburger visible	Hamburger not visible
`.mw-ui-icon`
`:before`
network request

tldr I can't find any differences between the two states! @Jdrewniak's inspection results seems to differ from mine, but we were also looking at different icons. When I look at the hamburger icon, the .mw-ui-icon is display: block in both cases and seems to have the correct height. The network request is 200 in both cases and the preview shows it there.

I'm not really sure what is causing this. webkit rendering bug?

Update: I've messed around with this some more and I'm pretty convinced now that the [[ https://github.com/wikimedia/mediawiki-skins-MinervaNeue/blob/master/skinStyles/mediawiki.ui.icon/mediawiki.ui.icon.less#L31 | background-size: contain in mediawiki.ui.icon.less ]] is somehow implicated in at least the icons that I've see disappear (hamburger, language selector, search).

When I remove that property, I don't notice the problem anymore on iOS. When I add it back in, I notice the problem.

The thing is that property is valid and is needed to scale the icons so we can't just remove it. I do think this is a webkit bug though

ovasileva updated the task description. (Show Details)Oct 7 2019, 5:11 PM

Jdrewniak moved this task from Needs Analysis to Doing on the Readers-Web-Backlog (Kanbanana-2019-20-Q2) board.Oct 7 2019, 5:17 PM

Jdrewniak claimed this task.Oct 7 2019, 5:24 PM

fwiw, I've been able to replicate a missing hamburger icon on iOS 12.0 safari (although it can be very inconsistent) using the following html/css:

<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="UTF-8"/>
<title>Barack Obama - Wikipedia</title>
<meta name="viewport" content="initial-scale=1.0, width=device-width"/>
<style>
.icon {
    display: block;
    width: 20px;
    height: 20px;
    background-image: linear-gradient(transparent,transparent),url(https://en.m.wikipedia.org/w/load.php?modules=skins.minerva.icons.images&image=mainmenu&format=original&skin=minerva&version=1w73t );
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
}
</style>
</head>
<body>
<a href="/" class="icon"></a>
</body>
</html>

Update: I've noticed three things about this bug:

When I remove the background-size: contain property, I don't notice the issue

When I remove linear-gradient(transparent,transparent) from background-image, I don't notice the issue

When I replace the svg with a png, I don't notice the issue

Therefore, my guess is that webkit has trouble reconciling a background-size: contain combined with multiple values for a background-image svg

Change 540479 merged by jenkins-bot:
[mediawiki/skins/MinervaNeue@master] Adding a static width/height for mw-ui-icon background images.

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

Change 541596 had a related patch set uploaded (by Jdlrobson; owner: Jdrewniak):
[mediawiki/skins/MinervaNeue@wmf/1.35.0-wmf.1] Adding a static width/height for mw-ui-icon background images.

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

ReleaseTaggerBot added a project: MW-1.35-notes (1.35.0-wmf.2; 2019-10-15).Oct 8 2019, 7:00 PM

Change 541596 merged by jenkins-bot:
[mediawiki/skins/MinervaNeue@wmf/1.35.0-wmf.1] Adding a static width/height for mw-ui-icon background images.

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

Mentioned in SAL (#wikimedia-operations) [2019-10-08T19:38:25Z] <dduvall@deploy1001> Synchronized php-1.35.0-wmf.1/skins/MinervaNeue/: sync T233521 backport prior to group0 (duration: 00m 59s)

ReleaseTaggerBot edited projects, added MW-1.35-notes (1.35.0-wmf.1; 2019-10-08); removed MW-1.35-notes (1.35.0-wmf.2; 2019-10-15).Oct 8 2019, 8:00 PM

Jdlrobson moved this task from Doing to Ready for Signoff on the Readers-Web-Backlog (Kanbanana-2019-20-Q2) board.Oct 8 2019, 8:13 PM

Amorymeltzer added a subscriber: Amorymeltzer.Oct 9 2019, 12:52 AM

ovasileva reassigned this task from Jdrewniak to Edtadros.Oct 9 2019, 9:12 AM

ovasileva moved this task from Ready for Signoff to Needs QA on the Readers-Web-Backlog (Kanbanana-2019-20-Q2) board.

ovasileva updated the task description. (Show Details)Oct 9 2019, 3:03 PM

Test Result:Production

OS: iOS
Browser: Various on Browserstack
Test Artifact(s):

AC#	Result	Device	iOS Version
1	❌	iPhone 5s	7
2	❌	iPhone 6	8
3	✅	iPhone 6s Plus	9
4	✅	iPhone 7	10
5	✅	iPhone 8	11
6	✅	iPhone XR	12
7	✅	iPhone XS	13
8	❌	iPad Air	7
9	❌	iPad Air 2	8
10	✅	iPad 6	11
11	✅	iPad Mini 2019	12
12	✅	iPad Pro 12.9	13

@ovasileva When I was testing the Oct 10 - non-English wikis I decided to pick the oldest phone on BrowserStack. It had iOS 7. I noticed that there was an issue with the icons. I redid all of the tests with iPhones and iPads for every iOS they had on all of the wikis I was testing in order to be more thorough. It looks like every device with an OS version 9 and above work fine. I'm not putting this in Ready For Signoff. Per https://en.wikipedia.org/wiki/IOS_version_history#iOS_9, iOS 9 came out in June 2015 and is supported on iPhone 4S onwards, iPad 2 onwards, iPad Mini onwards. So each of the devices tested would support iOS9. Without any metrics to back it up I cannot say for certain how many pre-iPhone 4s devices are being used or how many devices run iOS8 and earlier.

Edtadros updated the task description. (Show Details)Oct 11 2019, 4:12 AM

The ❌ cases are captured in the declined T207618

Moving this to Ready for Signoff. Thanks @Jdlrobson

We're done! Thanks all!

• Gilles mentioned this in T235092: Visible glitch when switching page (flushCssBuffer makes the page blink at every page change).Oct 15 2019, 9:49 AM

thiemowmde mentioned this in T281353: Broken image in the hint to the settings link on mobile view.Apr 29 2021, 7:58 AM

Maintenance_bot removed a project: Patch-For-Review.Apr 29 2021, 8:10 AM

	F30626854: ar_iPhoneXS_13.png
	Oct 11 2019, 3:58 AM

	F30625612: ja_iPhoneXS_13.png
	Oct 11 2019, 3:58 AM

	F30626684: ar_iPad6_11.png
	Oct 11 2019, 3:58 AM

	F30625656: en_iPadAir_7.png
	Oct 11 2019, 3:58 AM

Language selector and edit button icon not displayed on first load in iOS 13Closed, ResolvedPublicActions