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

Assigned To

Authored By

	Amire80
	Apr 16 2017, 3:42 AM

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

Details

Related Changes in Gerrit:

Subject	Repo	Branch	Lines +/-
CSSJanus now flips transforms so .rtl rules break main menu	mediawiki/extensions/MobileFrontend	wmf/1.29.0-wmf.20	+0 -26
CSSJanus now flips transforms so .rtl rules break main menu	mediawiki/extensions/MobileFrontend	master	+0 -26
Add test for main menu in RTL mode	mediawiki/extensions/MobileFrontend	master	+11 -0

Customize query in gerrit

Related Objects

Mentioned In: T148973: Identify our browser test coverage
Mentioned Here: rMWf591ff5dcfb2: Update cssjanus/cssjanus from 1.1.3 to 1.2.0

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

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)

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

gerritbot added a project: Patch-For-Review.Apr 17 2017, 8:36 PM

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?

Jdlrobson moved this task from Needs Analysis to Needs Code Review on the Reading-Web-Sprint-95 board.Apr 17 2017, 8:37 PM

Krinkle unsubscribed.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

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

Jdlrobson moved this task from Needs Code Review to Ready for Signoff on the Reading-Web-Sprint-95 board.

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 removed a project: Patch-For-Review.Apr 18 2017, 12:08 AM

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)

ReleaseTaggerBot added a project: MW-1.29-release (WMF-deploy-2017-04-11_(1.29.0-wmf.20)).Apr 18 2017, 1:00 AM

Krinkle unsubscribed.Apr 18 2017, 3:47 AM

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

ovasileva moved this task from Incoming to Upcoming on the Web-Team-Backlog-Archived board.Apr 18 2017, 3:41 PM

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

Olga can you sign off?

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

Jdlrobson mentioned this in T148973: Identify our browser test coverage.Apr 24 2017, 6:38 PM

MBinder_WMF moved this task from Upcoming to 2016-17 Q4 on the Web-Team-Backlog-Archived board.Oct 10 2017, 7:34 PM

	F7598054: Screen Shot 2017-04-17 at 1.20.40 PM.png
	Apr 17 2017, 8:21 PM

	F7570013: Screenshot_20170416-063959.png
	Apr 16 2017, 3:42 AM

MobileFrontend hamburger menu broken in RTL in Wikimedia in productionClosed, ResolvedPublicActions