Page MenuHomePhabricator

Bug: Thumbnails are incorrectly given the view-border-box class causing a minor on-load reflow (FOUC)
Closed, ResolvedPublic1 Estimated Story Points

Description

A subtle FOUC-class bug that is consistently reproducible on various pages at tablet/desktop resolution, including:

Screen recording attached below.

flip.gif (650×410 px, 217 KB)

Developer notes

All MobileFrontend View's are isBorderBox true by default.
All images are enhanced using the Thumbnail class (due to lazy loading images)

To fix this issue, define on the Thumbnail class:

isBorderBox: false,

Event Timeline

Jdlrobson renamed this task from Size of infobox image changes, causing on-load reflow (FOUC) to Size of infobox image changes on tablet/desktop, causing on-load reflow (FOUC).Aug 24 2018, 1:14 AM
Jdlrobson updated the task description. (Show Details)

It applies to mobile as well. It can be observed during the initial scroll (depending on the speed of the network/device), or upon reload (if scrolling first), or just directly if the intro is short enough.

flip.gif (606×361 px, 211 KB)

Jdlrobson renamed this task from Size of infobox image changes on tablet/desktop, causing on-load reflow (FOUC) to Bug: Thumbnails are incorrectly given the view-border-box class causing a minor on-load reflow (FOUC).Aug 24 2018, 5:00 PM
Jdlrobson triaged this task as Medium priority.
Jdlrobson updated the task description. (Show Details)
ovasileva set the point value for this task to 1.Aug 28 2018, 4:21 PM

Change 457506 had a related patch set uploaded (by Pmiazga; owner: Pmiazga):
[mediawiki/extensions/MobileFrontend@master] Thumbnails should not have view-border-box class attached

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

+2'd but blocked on merging from Jenkins. Should we move to the blocked column?

Change 457506 merged by jenkins-bot:
[mediawiki/extensions/MobileFrontend@master] Thumbnails should not have view-border-box class attached

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

No longer seeing the FOCU. Moving this over to QA, Adding QA instructions in a comment here since I'm currently using this task as an example of one that doesn't have QA instructions.

Environment: staging
Browser & device: desktop/any browser
Skin: Minerva & MFE
Steps:

  1. Go to https://en.m.wikipedia.org/wiki/Broadway_Hollywood_Building on desktop, and notice how the image of a building in the infobox resizes (gets slightly smaller) as the page is loading
  2. Go to the equivalent page on staging (https://reading-web-staging.wmflabs.org/wiki/Broadway_Hollywood_Building?useskin=minerva) and confirm that the image resize is no longer occuring

Not noticing that FOUC anymore for that article on desktop/mobile.

ovasileva added a subscriber: ovasileva.

looks good