Page MenuHomePhabricator

Start module (overlay and server-side rendered view) layout broken in Firefox
Closed, ResolvedPublicBUG REPORT

Description

image.png (1×844 px, 98 KB)

The same problem does not exist in Safari or Chrome.

@Etonkovidova could you possibly test with Firefox on an Android device? That would help determine the priority for fixing.
@RHo tested with Firefox on Android, and the same problem occurs:

Screenshot (23 Aug. 2019 15:34:08) (1×1 px, 85 KB)

(Test on Pixel 2 device, Android OS 9, Firefox v68.0.2)

Event Timeline

kostajh changed the subtype of this task from "Task" to "Bug Report".
Catrope subscribed.

Even when viewing the mobile start module without device emulation, it looks pretty messed up in Firefox:

Screenshot from 2019-09-10 11-31-56.png (923×546 px, 39 KB)

In Chrome it looks fine:

Screenshot from 2019-09-10 11-32-09.png (808×543 px, 48 KB)

As @kostajh correctly pointed out, the display: block rule (overriding display: flex) on the module divs added by rEGRE6b461b1c3a10: Start: fix iOS 10 layout issue is what causes this. But removing that rule presumably regresses the iOS bug that it was fixing, so I'm not sure if there's a way to fix both. I'll try.

Change 535699 had a related patch set uploaded (by Catrope; owner: Catrope):
[mediawiki/extensions/GrowthExperiments@master] Homepage: Fix mobile start module layout in Firefox

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

This patch doesn't regress the fix for T225668 on my iOS 11 test device, but since that bug was reported against iOS 10, we should test it on iOS 10 before merging. It doesn't make much sense to fix the mobile site on Firefox while breaking it in iOS Safari, because the latter has way higher market share on mobile.

Unfortunately my first attempt at this patch did regress (un-fix) T225668, but I've now found a way to fix both. Thanks @Etonkovidova for verifying.

Change 535837 had a related patch set uploaded (by Kosta Harlan; owner: Catrope):
[mediawiki/extensions/GrowthExperiments@wmf/1.34.0-wmf.22] Homepage: Fix start module layout bugs

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

Change 535699 merged by jenkins-bot:
[mediawiki/extensions/GrowthExperiments@master] Homepage: Fix start module layout bugs

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

Change 535837 merged by jenkins-bot:
[mediawiki/extensions/GrowthExperiments@wmf/1.34.0-wmf.22] Homepage: Fix start module layout bugs

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

Mentioned in SAL (#wikimedia-operations) [2019-09-11T16:31:17Z] <urbanecm@deploy1001> Synchronized php-1.34.0-wmf.22/extensions/GrowthExperiments/modules/homepage/ext.growthExperiments.StartModule.less: SWAT: c45d6d0: Homepage: Fix start module layout bugs (T230629, T232549, T225668) (duration: 01m 03s)

Change 535887 had a related patch set uploaded (by Gergő Tisza; owner: Catrope):
[mediawiki/extensions/GrowthExperiments@wmf/1.34.0-wmf.21] Homepage: Fix start module layout bugs

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

Change 535887 merged by jenkins-bot:
[mediawiki/extensions/GrowthExperiments@wmf/1.34.0-wmf.21] Homepage: Fix start module layout bugs

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

Mentioned in SAL (#wikimedia-operations) [2019-09-11T16:56:59Z] <urbanecm@deploy1001> Synchronized php-1.34.0-wmf.21/extensions/GrowthExperiments/modules/homepage/ext.growthExperiments.StartModule.less: SWAT: rEGREc0fd0617ea59: Homepage: Fix start module layout bugs (T230629, T232549, T225668) (duration: 01m 02s)