Page MenuHomePhabricator

[Bug] Table images disappear on scroll
Closed, ResolvedPublic

Description

Steps to reproduce
Go to the Supreme Court of the United States article
Go to the "Current justices" section
Open the table

Expected results
Images stay visible

Actual results
Images disappear after scrolling

Event Timeline

Restricted Application added a subscriber: Aklapper. · View Herald Transcript
LGoto triaged this task as High priority.Jun 29 2020, 6:37 PM
LGoto moved this task from Needs Triage to Bug Backlog on the Wikipedia-iOS-App-Backlog board.

Same thing happens in a mobile browser

Also occurs on this article — thought it might be something about a particular picture but removing various ones at the bottom doesn't have any effect. Also tried removing the sortbottom template at the bottom of the table but it didn't have any effect either.

Only occurs with scroll, so possibly related to how images are loaded in when scrolling. Seems to be shrinking the images down too much and the column collapses.

In any case doesn't seem like an iOS bug.

JoeWalsh subscribed.

In mobile-html, removing this rule from base.css fixes it:

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

It looks like it's added by MinervaNeue. Not sure the best way to fix, tagging over to the web team for more investigation.

To clarify this recurring problem for the future reader. You cannot have responsive images in tables, because a table cell's width is content dependent. So if that content is told to be no more than 100% of the parent, the width is undefined and basically becomes 0x0px.
Therefor the solution is to set a min-width on those resources, but that min-width is context dependent, which makes it hard to generalise for this problem.

TheDJ claimed this task.

This specific bug was fixed, and the more general 'problem' is already tracked at T116318: Images in tables are too small