Maniphest T202701

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

Assigned To

Authored By

	Krinkle
	Aug 24 2018, 1:09 AM

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,

Details

	Subject	Repo	Branch	Lines +/-
	Thumbnails should not have view-border-box class attached	mediawiki/extensions/MobileFrontend	master	+6 -0

Customize query in gerrit

Related Objects

Mentioned Here: T203490: Blocked MobileFrontend merges: Calling method \ApiMobileView::parseSectionsData in \ApiMobileView::getData that is always unsafe

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 moved this task from Incoming to Needs Prioritization on the Web-Team-Backlog board.Aug 24 2018, 4:55 PM

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 added projects: good first task, patch-welcome.

Jdlrobson updated the task description. (Show Details)

Jdlrobson moved this task from Needs Prioritization to Triaged but Future on the Web-Team-Backlog board.

ovasileva moved this task from Triaged but Future to Upcoming on the Web-Team-Backlog board.Aug 28 2018, 4:16 PM

ovasileva set the point value for this task to 1.Aug 28 2018, 4:21 PM

ovasileva edited projects, added Web-Team-Backlog (Readers-Web-Kanbanana-Board-2018-19-Q1); removed Web-Team-Backlog.Aug 31 2018, 7:51 AM

pmiazga claimed this task.Sep 3 2018, 3:26 PM

pmiazga moved this task from To Do to Doing on the Web-Team-Backlog (Readers-Web-Kanbanana-Board-2018-19-Q1) board.

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

gerritbot added a project: Patch-For-Review.Sep 3 2018, 4:28 PM

pmiazga removed pmiazga as the assignee of this task.Sep 3 2018, 4:28 PM

pmiazga moved this task from Doing to Needs Code Review on the Web-Team-Backlog (Readers-Web-Kanbanana-Board-2018-19-Q1) board.

pmiazga subscribed.

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

• nray moved this task from Needs Code Review to Blocked on Others on the Web-Team-Backlog (Readers-Web-Kanbanana-Board-2018-19-Q1) board.Sep 4 2018, 5:03 PM

Blocked on T203490

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

Jdlrobson moved this task from Blocked on Others to Needs Design Review on the Web-Team-Backlog (Readers-Web-Kanbanana-Board-2018-19-Q1) board.Sep 4 2018, 10:53 PM

Ready for design/QA on https://reading-web-staging.wmflabs.org/

ReleaseTaggerBot added a project: MW-1.32-notes (WMF-deploy-2018-09-18 (1.32.0-wmf.22)).Sep 4 2018, 11:00 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:

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