Page MenuHomePhabricator

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

Description

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

Screen recording attached below.

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

Krinkle created this task.Aug 24 2018, 1:09 AM
Restricted Application added a subscriber: Aklapper. · View Herald TranscriptAug 24 2018, 1:09 AM
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.

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 Normal 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

pmiazga removed pmiazga as the assignee of this task.Sep 3 2018, 4:28 PM
pmiazga added a subscriber: pmiazga.
nray added a subscriber: nray.Sep 4 2018, 3:37 PM

+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

alexhollender added a comment.EditedSep 11 2018, 7:14 PM

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 closed this task as Resolved.Sep 24 2018, 4:56 PM
ovasileva added a subscriber: ovasileva.

looks good