Page MenuHomePhabricator

Minerva doesn't take up full viewport width in Safari/Chrome on iPhone 6 Plus (iOS 9)
Closed, DuplicatePublic

Description

Minerva doesn't take up full viewport width in Safari/Chrome on iPhone 6 Plus.

T118600_Minerva-not-using-viewport_image1.PNG (1×720 px, 251 KB)
T118600_Minerva-not-using-viewport_image2.png (1×720 px, 243 KB)

Event Timeline

Volker_E raised the priority of this task from to High.
Volker_E updated the task description. (Show Details)
Volker_E added a project: Web-Team-Backlog.
Volker_E set Security to None.
Volker_E renamed this task from Minerva doesn't take up full viewport width in Safari/Chrome on iPhone 6+ to Minerva doesn't take up full viewport width in Safari/Chrome on iPhone 6 Plus.Nov 13 2015, 9:14 PM

I'm able to reproduce that on BrowserStack, but it doesn't affect all pages/articles. If you browse around (starting w MacBook Pro article), you'll see that it's working/not working randomly (from current understanding of reproducing it).

As @Florian mentioned on IRC, this appears to be related to the timeline element in one of the collapsed sections on that particular page. Once I navigated to that page, I wasn't able to quite reproduce the exact same behavior with Chrome DevTools, but I did notice the width of the page extend much further past the edge of the screen.

From BrowserStack tests, it seems to be an iOS 9 issue, not an iPhone 6 Plus one.
Also reproducible there on iPad Air 2.

T118600_Minerva-not-using-viewport_image3.png (921×1 px, 1021 KB)

Volker_E renamed this task from Minerva doesn't take up full viewport width in Safari/Chrome on iPhone 6 Plus to Minerva doesn't take up full viewport width in Safari/Chrome on iPhone 6 Plus (iOS 9).Nov 13 2015, 9:39 PM

@floria I replicated this morning on my iphone 6 ios9, but cannot anymore...could be a caching issue. Did a release go out between last night at 10pm and this morning?

I couldn't reproduce the issue this afternoon, but I just tried loading "enwiki > 1992 Pacific typhoon season" and I'm seeing the issue again. Appears to be related to the table in the "Season Summary" section:

IMG_1582.PNG (2×1 px, 445 KB)

IMG_1581.PNG (2×1 px, 240 KB)

I suspect something changed in the css referenced by the collapsable div:

<div class="collapsible-block open-block" id="content-collapsible-block-0" aria-pressed="true" aria-expanded="true">
<center>
<p><map name="timeline_9dec943c6f7197d46c7ed878acae1096" id="timeline_9dec943c6f7197d46c7ed878acae1096"></map><img usemap="#timeline_9dec943c6f7197d46c7ed878acae1096" src="//upload.wikimedia.org/wikipedia/en/timeline/9dec943c6f7197d46c7ed878acae1096.png"></p>
</center>
</div>

@JKatzWMF can you see if you can reproduce with "enwiki > 1992 Pacific typhoon season"?

Thanks Monte, for adding the comments. @Florian has already provided a patch set and has pointed out that the timeline is source of the issue. See T118601: Timelines break mobile skin, not taking up full viewport width 👍
This task got closed as duplicate (will copy your comments over to other task, let's continue there).