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.

Screenshot_20170416-063959.png (2×1 px, 303 KB)

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

Event Timeline

Restricted Application added a subscriber: Aklapper. · View Herald Transcript
Jdlrobson triaged this task as Unbreak Now! priority.Apr 17 2017, 8:21 PM
Jdlrobson subscribed.

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

Screen Shot 2017-04-17 at 1.20.40 PM.png (658×634 px, 106 KB)

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?

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)

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

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