Page MenuHomePhabricator

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

Description

I’m using iOS 13.0 on iPhone 11.

  1. Open safari, ensure no tabs are open and type a Wikipedia URL.
  2. 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

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
ACStatusDeviceiOS VersionDetails
1 iPhone 5s7T233521#5565518 T233521#5565549
2 iPhone 68T233521#5565518 T233521#5565549
3iPhone 6s Plus9T233521#5565518
4iPhone 710T233521#5565518
5iPhone 811T233521#5565518
6iPhone XR12T233521#5565518
7iPhone XS13T233521#5565518
8 iPad Air7T233521#5565518 T233521#5565549
9 iPad Air 28T233521#5565518 T233521#5565549
10iPad 611T233521#5565518
11iPad Mini 201912T233521#5565518
12iPad Pro 12.913T233521#5565518

these cases were declined per T207618

Event Timeline

siebrand created this task.Sun, Sep 22, 1:28 PM
Restricted Application added a subscriber: Aklapper. · View Herald TranscriptSun, Sep 22, 1:28 PM
siebrand added a comment.EditedSun, Sep 22, 1:35 PM

added as attachments.

Jdlrobson added a subscriber: Jdlrobson.

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

Krinkle removed a subscriber: Krinkle.Tue, Oct 1, 5:32 PM
ovasileva triaged this task as High priority.Wed, Oct 2, 8:47 AM
Jdlrobson renamed this task from Language selector and edit button not displayed on first load in iOS 13 to Language selector and edit button icon not displayed on first load in iOS 13.Wed, Oct 2, 5:02 PM
Jdlrobson lowered the priority of this task from High to Normal.

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 raised the priority of this task from Normal to High.Wed, Oct 2, 6:29 PM
ovasileva added a subscriber: ovasileva.

@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

watchstaredit

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

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.

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

Jdlrobson reopened this task as Open.Thu, Oct 3, 4:24 PM

Making this the canonical bug

nray added a subscriber: nray.EditedThu, Oct 3, 10:36 PM

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 visibleHamburger 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?

nray added a comment.Fri, Oct 4, 12:28 AM

Update: I've messed around with this some more and I'm pretty convinced now that the 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)Mon, Oct 7, 5:11 PM
Jdrewniak claimed this task.Mon, Oct 7, 5:24 PM
nray added a comment.EditedMon, Oct 7, 8:26 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:

  1. When I remove the background-size: contain property, I don't notice the issue
  1. When I remove linear-gradient(transparent,transparent) from background-image, I don't notice the issue
  1. 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

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)

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

Test Result:Production

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

AC#ResultDeviceiOS Versionenwikieswikidewikijawikiarwiki
1iPhone 5s7
2iPhone 68
3iPhone 6s Plus9
4iPhone 710
5iPhone 811
6iPhone XR12
7iPhone XS13
8iPad Air7
9iPad Air 28
10iPad 611
11iPad Mini 201912
12iPad Pro 12.913
Edtadros reassigned this task from Edtadros to ovasileva.Fri, Oct 11, 4:07 AM
Edtadros added a subscriber: Edtadros.

@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)Fri, Oct 11, 4:12 AM

The ❌ cases are captured in the declined T207618

Edtadros updated the task description. (Show Details)Sat, Oct 12, 12:54 AM

Moving this to Ready for Signoff. Thanks @Jdlrobson

ovasileva closed this task as Resolved.Mon, Oct 14, 9:09 AM

We're done! Thanks all!