Page MenuHomePhabricator

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

Description


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

Uziel302 created this task.Sat, Sep 7, 7:48 PM
Restricted Application added a subscriber: Aklapper. · View Herald TranscriptSat, Sep 7, 7:48 PM
Restricted Application added a project: I18n. · View Herald TranscriptSun, Sep 8, 5:03 AM
Uziel302 updated the task description. (Show Details)Sun, Sep 8, 5:05 AM
Amire80 added a subscriber: Amire80.Sun, Sep 8, 8:09 AM

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.

Ahmad252 renamed this task from Missing menu icon on mobile chrome + RTL to Hamburger menu is hidden in mobile view of RTL languages.Sun, Sep 8, 2:14 PM
Ahmad252 added subscribers: Ebraminio, Ladsgroup, Mardetanha.
Ahmad252 added a subscriber: Ahmad252.EditedSun, Sep 8, 2:29 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.

Huji added a subscriber: Huji.EditedSun, Sep 8, 3:10 PM

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.Mon, Sep 9, 9:39 AM
Jdlrobson triaged this task as Unbreak Now! priority.Mon, Sep 9, 8:23 PM
Jdlrobson updated the task description. (Show Details)
Restricted Application added a subscriber: Liuxinyu970226. · View Herald TranscriptMon, Sep 9, 8:23 PM
Jdlrobson claimed this task.EditedMon, Sep 9, 8:32 PM
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.Mon, Sep 9, 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:

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 reassigned this task from Jdlrobson to ovasileva.Tue, Sep 10, 12:14 AM
Jdlrobson lowered the priority of this task from Unbreak Now! to High.
Jdlrobson added a subscriber: Jdlrobson.

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.

nray moved this task from Needs triage to Triaged on the Mobile board.Tue, Sep 10, 12:26 AM
ovasileva closed this task as Resolved.Tue, Sep 10, 9:45 AM

Icons are back, resolving