Page MenuHomePhabricator

Homepage: start module layout on iOS Safari 10 and iOS Chrome 60.0.3112.89
Closed, ResolvedPublic

Description

The start module layout in fullscreen view is broken on iOS Safari 10 and iOS Chrome 60.0.3112.89.

Event Timeline

SBisson created this task.Jun 12 2019, 7:16 PM
Restricted Application added a subscriber: Aklapper. · View Herald TranscriptJun 12 2019, 7:16 PM

@kostajh Roan and I have android phones... could you have a quick look?

This is what I see on iOS 12

MMiller_WMF renamed this task from The start module layout in fullscreen view is broken on iOS Safari 10 and iOS Chrome 60.0.3112.89 to Homepage: start module layout on iOS Safari 10 and iOS Chrome 60.0.3112.89.EditedJun 12 2019, 10:27 PM
MMiller_WMF edited projects, added Growth-Team (Current Sprint); removed Growth-Team.
MMiller_WMF updated the task description. (Show Details)
MMiller_WMF added subscribers: Catrope, Etonkovidova, Cntlsn and 3 others.

@Catrope @SBisson @Etonkovidova -- are these browser versions we're supposed to support? If so, we will want to address it for the MVP release. If not, then this will not need to be addressed.

I was going to take a look but can't because of T225682: Login, account creation, anything else that accesses global user throws DBReadOnlyRoleError in beta labs, so I'm going to investigate that first.

It works fine for me on Android too:

@Catrope @SBisson @Etonkovidova -- are these browser versions we're supposed to support? If so, we will want to address it for the MVP release. If not, then this will not need to be addressed.

Yes, these are supported browser versions. However, we'll have to reproduce this bug before we can fix it. Did the screenshot in the task description come from @Cntlsn's phone?

@Catrope yep! and happy to help with debugging.

@Cntlsn It is possible to connect from Safari on your composer to Safari on your phone to inspect the DOM (@kostajh can provide the details on how to do it). It would be great if you could have a look at what is going on there.

Cntlsn added a comment.EditedJun 14 2019, 6:36 AM

@SBisson overriding the flex attribute in

.growthexperiments-homepage-module-start > .growthexperiments-homepage-module-body .growthexperiments-homepage-module {
  display: flex;
}

to block in

.growthexperiments-homepage-mobile-details .growthexperiments-homepage-module-start > .growthexperiments-homepage-module-section-body .growthexperiments-homepage-module {
  display: block;
}

fixes the issue for me.

I also tested the fix with the Safari built-in simulator for iOS 12.1.3 and looks good.

JTannerWMF moved this task from Needs triage to Triaged on the Mobile board.Jun 14 2019, 11:35 AM

Change 518273 had a related patch set uploaded (by Sbisson; owner: Sbisson):
[mediawiki/extensions/GrowthExperiments@master] Fix iOS Safari rendering issue.

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

SBisson claimed this task.Jun 21 2019, 2:14 PM
SBisson moved this task from Incoming to Code Review on the Growth-Team (Current Sprint) board.

Change 518273 merged by jenkins-bot:
[mediawiki/extensions/GrowthExperiments@master] Fix iOS Safari rendering issue.

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

Etonkovidova moved this task from QA to Design Review on the Growth-Team (Current Sprint) board.EditedJun 26 2019, 7:53 AM

@Cntlsn - it seems that even desktop for the Start module is broked:

Safari Version 10.1.2 (OS X Yosemite) in betalabs :

Desktop real machineMobile emulator from Safari 10

I checked Chrome 60 on Mac (not iOS) and did not see any problems. Please re-check on your device (and Desktop too). Probably some additional work is needed.

that's probably because display: block has been set to .growthexperiments-homepage-module-section-body and not to .growthexperiments-homepage-module

the following fixes the issue for me on iOS Safari 10

.growthexperiments-homepage-module {
  display: block;
}

@Etonkovidova could you please try the same for Safari Version 10.1.2 (OS X Yosemite)?
Thx

@Cntlsn - doesn't seem to be working on the desktop.

@Etonkovidova I have tried browsing the page on Safari 12.1 (High Sierra) with the custom agent for Safari 10.1 (Yosemite): Mozilla/5.0 (Macintosh; Intel Mac OS X 10_10_5) AppleWebKit/602.1.50 (KHTML, like Gecko) Version/10.1.2 Safari

But I'm not able to replicate.

@Etonkovidova I have tried browsing the page on Safari 12.1 (High Sierra) with the custom agent for Safari 10.1 (Yosemite): Mozilla/5.0 (Macintosh; Intel Mac OS X 10_10_5) AppleWebKit/602.1.50 (KHTML, like Gecko) Version/10.1.2 Safari
But I'm not able to replicate.

I've updated my comment https://phabricator.wikimedia.org/T225668#5285126 to make it clear that the issue with desktop Homepage was found on a real machine, but the mobile display issue was observed in the emulator. I do not have a real mobile device with Safari 10 (and, accordingly, iOS 10).

Change 520754 had a related patch set uploaded (by Sbisson; owner: Sbisson):
[mediawiki/extensions/GrowthExperiments@master] Start: fix iOS 10 layout issue

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

Change 520754 merged by jenkins-bot:
[mediawiki/extensions/GrowthExperiments@master] Start: fix iOS 10 layout issue

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

Etonkovidova closed this task as Resolved.Jul 12 2019, 10:07 PM