Page MenuHomePhabricator

Hamburger and notifications menu icons arehidden in mobile view of RTL languages in Chrome
Closed, ResolvedPublic

Description

ae6cc7d9-db26-4e38-975b-30432a18e201.jpg (1×738 px, 108 KB)

I am using android 9 and chrome 76, and rtl language, e.g. Arabic, Hebrew or any other language when ?uselang=he is added to the url. The photo is from https://en.m.wikipedia.org/wiki/Unicorn_(finance)?uselang=he
In Samsung Internet on the same device everything is fine.

Also replicated:
https://he.m.wikipedia.org/wiki/Unicorn_(finance)

Event Timeline

Thanks for the report.

I can reproduce this.

I don't see the three stripes ("hamburger") icon at the top bar next to the "Wikipedia" wordmark in the Hebrew Wikipedia in the Chrome browser on my Samsung Galaxy S7 phone. I do see it on the Firefox browser on the same phone.

May be something changed from Google Chrome. On older version (Chrome 75) it works fine.

Here with ?uselang=ar. The phone is android.

IMG_20190908_120432_769.jpg (1×720 px, 133 KB)

Ahmad252 renamed this task from Missing menu icon on mobile chrome + RTL to Hamburger menu is hidden in mobile view of RTL languages.Sep 8 2019, 2:14 PM

I can reproduce it here in chrome v76, and I know at least one user in fawiki having the same problem. Again (like T232085), it only occurs in chrome and only in RTL languages. The menu is still there, however. If you click on that blank space before the logo, it will open the menu properly.

I am going to venture a guess that this is a Chrome-specific CSS problem similar to T232085, i.e. the "hamburger" icon comes from a ::after or ::before CSS rule, and Chrome messes it up in RTL settings. Can someone check with Safari too? Of note, and similar to T232085, Safari seems not to be affected. So this is likely not a WebKit issue, but specifically a Chrome issue.

Aklapper renamed this task from Hamburger menu is hidden in mobile view of RTL languages to Hamburger menu is hidden in mobile view of RTL languages in Chrome.Sep 9 2019, 9:39 AM
Jdlrobson triaged this task as Unbreak Now! priority.Sep 9 2019, 8:23 PM
Jdlrobson updated the task description. (Show Details)
Jdlrobson added a subscriber: Jdrewniak.

Okay, @Jdrewniak has identified a short term fix if you need one asap to add to your MediaWiki:Mobile.css:

.mw-ui-icon:before { top: 0; }

I'm investigating what's causing this as we speak.

Jdlrobson renamed this task from Hamburger menu is hidden in mobile view of RTL languages in Chrome to Hamburger and notifications menu icons arehidden in mobile view of RTL languages in Chrome.Sep 9 2019, 8:33 PM

Okay, @Jdrewniak has identified a short term fix if you need one asap to add to your MediaWiki:Mobile.css:

fawiki done

it looks like the problem is caused because of how text displays using pseudo elements and likely a bug in Chrome:

Screenshot 2019-09-09 at 1.36.29 PM.png (116×315 px, 13 KB)

The text is appearing above the icon, when they should be overlapping (the icon is supposed to be absolutely positioned!)

Change 535284 had a related patch set uploaded (by Jdlrobson; owner: Jdlrobson):
[mediawiki/skins/MinervaNeue@master] Icon pseudo elements need top: 0 for RTL languages

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

Change 535285 had a related patch set uploaded (by Jdlrobson; owner: Jdlrobson):
[mediawiki/skins/MinervaNeue@wmf/1.34.0-wmf.21] Icon pseudo elements need top: 0 for RTL languages

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

Change 535284 merged by jenkins-bot:
[mediawiki/skins/MinervaNeue@master] Icon pseudo elements need top: 0 for RTL languages

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

Change 535285 merged by jenkins-bot:
[mediawiki/skins/MinervaNeue@wmf/1.34.0-wmf.21] Icon pseudo elements need top: 0 for RTL languages

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

Mentioned in SAL (#wikimedia-operations) [2019-09-09T23:44:20Z] <catrope@deploy1001> Synchronized php-1.34.0-wmf.21/skins/MinervaNeue/: T232260 (duration: 00m 57s)

Jdlrobson lowered the priority of this task from Unbreak Now! to High.
Jdlrobson subscribed.

This should be fixed now. I'm assuming we will do a bunch of QA as part of the other icon tasks so can skip it here.

Icons are back, resolving