Page MenuHomePhabricator

[Bug] iPadOS 13 shows the desktop version of Safari with a broken layout
Open, NormalPublicBUG REPORT

Description

Steps to reproduce

  1. Install iPadOS 13 through the beta program or by installing Xcode 11 beta and running the iPadOS 13 simulator
  2. Open any Wikipedia article in Safari
  3. Resize the Safari window by opening another app in split screen

Expected results

TBD (show the mobile site?)

Actual results

The desktop version shows with a broken layout


Environments observed

  • OS version: iPadOS 13
  • Device model: iPad (6th generation)
  • Device language: en

Notes

iPadOS now sends Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/13.0 Safari/605.1.15 as the User-Agent from Safari if the page is loaded while the window is wide enough. If the page is loaded with a narrow window, it sends Mozilla/5.0 (iPad; CPU OS 13_0 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/13.0 Mobile/15E148 Safari/604.1. The problem occurs when Wikipedia is loaded fullscreen and resized to be narrow.

The width seems to be set by the widest item on the page:

Adding <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1, shrink-to-fit=no"> prevents this scaling. More info: https://developer.apple.com/videos/play/wwdc2019/203/

Event Timeline

JoeWalsh created this task.Aug 5 2019, 7:48 PM
Restricted Application added a subscriber: Aklapper. · View Herald TranscriptAug 5 2019, 7:48 PM
JoeWalsh updated the task description. (Show Details)Aug 5 2019, 7:59 PM
JoeWalsh updated the task description. (Show Details)Aug 5 2019, 8:47 PM
Jdlrobson claimed this task.Aug 5 2019, 9:36 PM
Jdlrobson moved this task from Incoming to Needs Prioritization on the Readers-Web-Backlog board.
ovasileva triaged this task as Normal priority.Aug 5 2019, 11:04 PM
Jdlrobson reassigned this task from Jdlrobson to phuedx.Aug 6 2019, 2:15 PM
Jdlrobson added a project: Traffic.
Jdlrobson added a subscriber: Jdlrobson.

We shouldn't add <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1, shrink-to-fit=no"> to Vector. When Monobook did that it annoyed a lot of people and I wouldn't advise it as it seems many users use Vector on their mobile devices exactly because they don't want a responsive layout.

Varnish determines when to show or not show the mobile website and that's purely based on user agent and this is out of the teams expertise and will require syncing with ops. However, the user agent iPadOS sends is not a mobile URL, so if iPadOS wants to be recognised as desktop that's going to be impossible to change.

I'm thus not sure what to do with this ticket. What would you recommend Sam?

Restricted Application added a project: Operations. · View Herald TranscriptAug 6 2019, 2:15 PM
ovasileva reassigned this task from phuedx to Jdlrobson.Aug 6 2019, 2:54 PM
ovasileva added a subscriber: phuedx.
Jdlrobson reassigned this task from Jdlrobson to ovasileva.Aug 7 2019, 6:20 PM

Not sure if you or Sam would be best placed to work out what to do with this. Talking to Operations > Traffic and/or Apple would be useful.

We shouldn't add <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1, shrink-to-fit=no"> to Vector. When Monobook did that it annoyed a lot of people and I wouldn't advise it as it seems many users use Vector on their mobile devices exactly because they don't want a responsive layout.

Do you have a link and/or do you remember where this annoyance was voiced?

We shouldn't add <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1, shrink-to-fit=no"> to Vector. When Monobook did that it annoyed a lot of people and I wouldn't advise it as it seems many users use Vector on their mobile devices exactly because they don't want a responsive layout.

Do you have a link and/or do you remember where this annoyance was voiced?

https://de.wikipedia.org/w/index.php?title=Wikipedia:Fragen_zur_Wikipedia&oldid=178125403#Merkw%C3%BCrdige_Seitendarstellung

ema moved this task from Triage to Watching on the Traffic board.Aug 14 2019, 12:52 PM

Varnish determines when to show or not show the mobile website and that's purely based on user agent and this is out of the teams expertise and will require syncing with ops.

Yes and no. The mobile_redirect subroutine is fairly simple (see https://github.com/wikimedia/puppet/blob/dd8b6a8339bdc6b389c794b0e7ad5f4338d30194/modules/varnish/templates/text-frontend.inc.vcl.erb#L27).

However, the user agent iPadOS sends is not a mobile [one], so if iPadOS wants to be recognised as desktop that's going to be impossible to change.

This. Ignoring minor version numbers, that UA is the same as mine (Safari 12.1.2 on macOS Mojave 10.14.6). Unless we want to redirect ALL such UAs to the mobile site, then UA sniffing won't work here.

@ovasileva okay to redirect Safari desktop to mdot?

CC @DStrine @mepps @Ejegg @BBlack

@ovasileva okay to redirect Safari desktop to mdot?
CC @DStrine @mepps @Ejegg @BBlack

@dr0ptp4kt - I would be more comfortable with making a request to Apple on redirecting iPad OS to Safari mobile. I think redirecting to the mobile domain on Safari desktop would have negative consequences to editors using Safari, which we would like to avoid if possible.

Okay, let me look into this.

@ovasileva okay to redirect Safari desktop to mdot?
CC @DStrine @mepps @Ejegg @BBlack

@dr0ptp4kt Thanks!!! As far as I can tell, regardless of how this is resolved, there are no significant short- or medium-term implications for CentralNotice or Fundraising.

(The only possible immediate impact, I think, is in the statistics for banner impressions on iPads vs. desktop, but there's nothing we could do about that. And, I guess, banners not showing up properly on a broken layout, if the issue isn't solved and a lot of users experience breakage...)

In the longer term, we do need to think about responsive design for banners, and how CentralNotice and Advancement banners (like the little reminders that follow you around as you scroll) will fit in with the desktop refresh.

In the longer term, we do need to think about responsive design for banners, and how CentralNotice and Advancement banners (like the little reminders that follow you around as you scroll) will fit in with the desktop refresh.

+1 on this. We should discuss once we're a bit further along on the project.