Maniphest T200518

[Bug] Lazy loaded image placeholders larger than viewport cause horizontal scrollbar on small screens
Closed, ResolvedPublic
Actions

Description

Steps to Reproduce

Set the screen width 450px.
Visit https://reading-web-staging.wmflabs.org//w/index.php?title=Barack_Obama&oldid=852588387
Open DevTools and disable the internet connection (go offline).
Scroll to the "Legacy" section.
Open "Legacy" section
Observe gray image placeholder

Expected Results

Placeholder is same dimensions as the image and constrained to the image viewport

Actual Results

Placeholders are the unconstrained image dimensions
, is larger than the viewport and it is possible to horizontally scroll

Environments Observed

Browser Version

Chromium v67.0.3396.99

OS Version

Ubuntu v18.04 64b

Device Model

Desktop

Device Language

English

Developer notes

The issue is related to the use of display: flex on the .thumbinner element. Removing display: flex or assigning a max-width to the child element makes the issue go away.

I notice that setting the flex-direction to column (currently default row) makes this go away.

.content a > img, .content a > .lazy-image-placeholder, .content noscript > img {
max-width: 100%;
}

needs to be expanded to include a.image

The image in question has width 512px set.

Details

	Project	Branch	Lines +/-	Subject
	mediawiki/skins/MinervaNeue	master	+2 -0	Set flex-direction for thumbnails to avoid overflow issues

Customize query in gerrit

Related Objects

Mentioned In: T199351: Lazy loaded images: Lazily loaded inline images cause reflow - should retain other classes such as `thumbborder`
Mentioned Here: T191893: [Bug] Horizontal scrollbar shown when browser window is between 1000px and 1107px
T197188: Lazy loaded images: MobileFormatter should take into account mobile image dimension adjustments
T199351: Lazy loaded images: Lazily loaded inline images cause reflow - should retain other classes such as `thumbborder`

Event Timeline

Niedzielski created this task.Jul 27 2018, 2:00 PM

Restricted Application added a subscriber: Aklapper. · View Herald TranscriptJul 27 2018, 2:00 PM

Possible dup of T191893, T197188, T199351.

Jdlrobson moved this task from Incoming to Needs Prioritization on the Readers-Web-Backlog board.Jul 30 2018, 2:22 AM

Jdlrobson renamed this task from [Bug] Lazy loaded image placeholders cause horizontal scrollbar on small screens to [Bug] Lazy loaded image placeholders larger than viewport cause horizontal scrollbar on small screens.Jul 30 2018, 3:01 AM

Jdlrobson updated the task description. (Show Details)

Jdlrobson moved this task from Needs Prioritization to Upcoming on the Readers-Web-Backlog board.

Jdlrobson mentioned this in T199351: Lazy loaded images: Lazily loaded inline images cause reflow - should retain other classes such as `thumbborder`.

I'm having trouble replicating this bug. This is how it looks on Chrome 67.0.3396.99 on Mac OS High Sierra 10.13.5:

Screen Shot 2018-07-31 at 5.20.10 PM.png (1×860 px, 364 KB)

Niedzielski updated the task description. (Show Details)Aug 1 2018, 1:41 PM

@nray, I can no longer reproduce this issue either.

Discussed taking some time to reproduce and look into potential solutions prior to tackling the issue - we estimated around 4hrs for this investigation

ovasileva renamed this task from [Bug] Lazy loaded image placeholders larger than viewport cause horizontal scrollbar on small screens to [Bug] [Spike 4hrs] Lazy loaded image placeholders larger than viewport cause horizontal scrollbar on small screens.Aug 1 2018, 4:14 PM

ovasileva moved this task from Upcoming to Triaged but Future on the Readers-Web-Backlog board.Aug 1 2018, 4:40 PM

Jdlrobson updated the task description. (Show Details)Aug 2 2018, 9:37 AM

Change 449999 had a related patch set uploaded (by Jdlrobson; owner: Jdlrobson):
[mediawiki/skins/MinervaNeue@master] Set flex-direction for thumbnails to avoid overflow issues

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

gerritbot added a project: Patch-For-Review.Aug 2 2018, 10:04 AM

I can replicate and fix seems straightforward to me. Will chat with devs to work out what's going on here.

I can repro again today. I felt confident at my go yesterday so I'm not sure if reproduction is flaky or I'm flaky. Beware!

Change 449999 merged by jenkins-bot:
[mediawiki/skins/MinervaNeue@master] Set flex-direction for thumbnails to avoid overflow issues

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

ReleaseTaggerBot added a project: MW-1.32-notes (WMF-deploy-2018-08-07 (1.32.0-wmf.16)).Aug 2 2018, 1:00 PM

Jdlrobson renamed this task from [Bug] [Spike 4hrs] Lazy loaded image placeholders larger than viewport cause horizontal scrollbar on small screens to [Bug] Lazy loaded image placeholders larger than viewport cause horizontal scrollbar on small screens.Aug 2 2018, 1:06 PM

Jdlrobson removed a project: Patch-For-Review.

Jdlrobson added a project: Readers-Web-Kanbanana-Board-Old.

Jdlrobson moved this task from Needs Prioritization to Current Sprint (and resolved 2018-19 Q1) pre-milestone on the Readers-Web-Backlog board.

Jdlrobson moved this task from To Do to Needs Design Review on the Readers-Web-Kanbanana-Board-Old board.

I've loaded this on reading-web-staging

@alexhollender take a look at this. You should check a few other images to check nothing looks out of the ordinary because of this change.

@Jdlrobson - is this connected to another task? Wondering why it's currently on the board...

@ovasileva a patch has been merged which fixes the problem so it should go through our QA, right?

In T200518#4472427, @Jdlrobson wrote:

@ovasileva a patch has been merged which fixes the problem so it should go through our QA, right?

I guess my question then is: why are we working on this right now?

alexhollender reassigned this task from alexhollender to Ryasmeen.Aug 13 2018, 4:58 PM

alexhollender moved this task from Needs Design Review to Needs QA on the Readers-Web-Kanbanana-Board-Old board.

alexhollender added a project: Product-QA.

phuedx updated the task description. (Show Details)Aug 22 2018, 1:18 PM

Restricted Application changed the subtype of this task from "Deadline" to "Task". · View Herald TranscriptAug 22 2018, 1:18 PM

Hrrm. I'm seeing the same thing that @nray saw in T200518#4467436 on both reading-web-staging and readers-web-master, i.e. not what @alexhollender saw in T200518#4499137.

Edit

Browser: Chrome (68.0.3440.106)
OS: macOS High Sierra (10.13.6)

phuedx claimed this task.Aug 22 2018, 2:12 PM

phuedx added a subscriber: Ryasmeen.

phuedx moved this task from Needs QA to Needs Code Review on the Readers-Web-Kanbanana-Board-Old board.Aug 22 2018, 5:07 PM

phuedx moved this task from Needs Code Review to Needs QA on the Readers-Web-Kanbanana-Board-Old board.

I met with @Jdlrobson about this after today's kickoff ritual. We tested this in production (enwiki), and proved to ourselves that the fix works by following the QA steps in the description with the window set to 450px and 375px widths.

Here's what we saw: