Page MenuHomePhabricator

MobileFrontend hamburger menu broken in RTL in Wikimedia in production
Closed, ResolvedPublic

Description

Since 13 April 2017 or so, the hamburger menu in RTL wikis is broken. All RTL sites, all mobile browsers.

Test criteria

  • When I visit a RTL language e.g. he.wikipedia.org on mobile and click the menu icon, the menu shows on the right and I am able to click items inside it.
  • If time... running through all standard tests for RTL sites would check we didn't break anything in the process eg. can you edit/search/view nearby

Details

Related Gerrit Patches:
mediawiki/extensions/MobileFrontend : wmf/1.29.0-wmf.20CSSJanus now flips transforms so .rtl rules break main menu
mediawiki/extensions/MobileFrontend : masterCSSJanus now flips transforms so .rtl rules break main menu
mediawiki/extensions/MobileFrontend : masterAdd test for main menu in RTL mode

Event Timeline

Amire80 created this task.Apr 16 2017, 3:42 AM
Restricted Application added a project: I18n. · View Herald TranscriptApr 16 2017, 3:42 AM
Restricted Application added a subscriber: Aklapper. · View Herald Transcript
Jdlrobson triaged this task as Unbreak Now! priority.Apr 17 2017, 8:21 PM
Jdlrobson added a subscriber: Jdlrobson.

Weird... seems fine when the user is logged in. I wonder what is going on here.

Restricted Application added subscribers: Jay8g, TerraCodes. · View Herald TranscriptApr 17 2017, 8:21 PM
Jdlrobson renamed this task from MobileFrontend hamburger menu broken in RTL in Wikimedia in production to MobileFrontend hamburger menu broken in RTL in Wikimedia in production for anonymous users (but not logged in).Apr 17 2017, 8:21 PM
Jdlrobson renamed this task from MobileFrontend hamburger menu broken in RTL in Wikimedia in production for anonymous users (but not logged in) to MobileFrontend hamburger menu broken in RTL in Wikimedia in production for anonymous users.Apr 17 2017, 8:26 PM

Change 348568 had a related patch set uploaded (by Jdlrobson):
[mediawiki/extensions/MobileFrontend@master] CSSJanus now flips transforms so .rtl rules break main menu

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

I can also replicate this for logged in users now (which indicates something changed under the hood)
Looks like css janus is flipping the transform rule (it should be -240px and explicitly is in the code):

.rtl.primary-navigation-enabled.animations .drawer .position-fixed, .rtl.primary-navigation-enabled.animations #mw-mf-page-center {
    transform: translate(240px,0);
}

This appears to be due to the CSS Janus update in rMWf591ff5dcfb2: Update cssjanus/cssjanus from 1.1.3 to 1.2.0 merged 13 days ago. I suspect it added support for transforms that previously wasn't provided.

cc @Reedy @Krinkle

Given there is no deployments this week can be roll back that update temporarily?

Krinkle removed a subscriber: Krinkle.Apr 17 2017, 9:18 PM

Change 348638 had a related patch set uploaded (by Jdlrobson):
[mediawiki/extensions/MobileFrontend@master] Add test for main menu in RTL mode

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

Change 348638 abandoned by Jdlrobson:
Add test for main menu in RTL mode

Reason:
Doesn't help... we need UI regression detection

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

Jdlrobson added subscribers: Krinkle, greg.

cc @greg I know there's a deployment freeze.. but a broken RTL experience rendering navigation unusable seems pretty bad.

Thanks for the +1 @Krinkle for https://gerrit.wikimedia.org/r/348638

Jdlrobson renamed this task from MobileFrontend hamburger menu broken in RTL in Wikimedia in production for anonymous users to MobileFrontend hamburger menu broken in RTL in Wikimedia in production.Apr 18 2017, 12:06 AM

Change 348568 merged by jenkins-bot:
[mediawiki/extensions/MobileFrontend@master] CSSJanus now flips transforms so .rtl rules break main menu

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

Change 348655 had a related patch set uploaded (by Catrope; owner: Jdlrobson):
[mediawiki/extensions/MobileFrontend@wmf/1.29.0-wmf.20] CSSJanus now flips transforms so .rtl rules break main menu

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

Jdlrobson updated the task description. (Show Details)
Jdlrobson moved this task from Ready for Signoff to Needs QA on the Reading-Web-Sprint-95 board.
Jdlrobson updated the task description. (Show Details)

Change 348655 merged by jenkins-bot:
[mediawiki/extensions/MobileFrontend@wmf/1.29.0-wmf.20] CSSJanus now flips transforms so .rtl rules break main menu

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

Mentioned in SAL (#wikimedia-operations) [2017-04-18T00:36:48Z] <catrope@tin> Synchronized php-1.29.0-wmf.20/extensions/MobileFrontend/resources/mobile.mainMenu/mainmenu.less: T163059 (duration: 03m 07s)

Krinkle removed a subscriber: Krinkle.Apr 18 2017, 3:47 AM
phuedx assigned this task to ABorbaWMF.Apr 18 2017, 11:11 AM
phuedx added subscribers: ABorbaWMF, phuedx.

@ABorbaWMF: See the "Test criteria" section in the description.

Tested the menus on he.wikipedia.org. Found no issues. Able to access all the menu items, Login and out, and toggle settings. Tested a few other items to make sure nothing seemed broken. @ovasileva, I can add more systems or tests, but it appears to be working.

System Info:
iPhone 6 iOS 8.1 - Safari 8
iPhone 6 iOS 8.1 - Chrome 41
iPad Mini iOS 7.0 - Safari 7
iPad Pro iOS 10.2 - Safari 10
Galaxy S4 Android 4.2 - Chrome 33
Nexus 4 Android 4.2 - Chrome 42
Nexus 6P Android 7.0 - Firefox 50
Nexus 9 Android 6.0 - Opera Mobile 35

Jdlrobson reassigned this task from ABorbaWMF to ovasileva.Apr 18 2017, 5:40 PM
Jdlrobson moved this task from Needs QA to Ready for Signoff on the Reading-Web-Sprint-95 board.

Olga can you sign off?

ovasileva closed this task as Resolved.Apr 18 2017, 5:42 PM

yup, looks good, thanks everyone for taking care of this so quickly!