Page MenuHomePhabricator

Image and captions overlapping on German article in Android app
Closed, ResolvedPublic

Description

User reported display issue on article "Kienspan" on German wikipedia, confirmed in app. I checked some random other articles which seemed to be fine.

The same article also seems fine in the iOS app (though maybe this was because I was using a tablet and not a phone).

Event Timeline

LGoto created this task.Mar 21 2019, 6:46 PM
Restricted Application added a subscriber: Aklapper. · View Herald TranscriptMar 21 2019, 6:46 PM
cooltey added subscribers: Mhurd, cooltey.EditedMar 21 2019, 11:14 PM

Looks like somehow the CSS style does not working properly (in the android), and also found the in the English version of this article, the images and captions are contained in div with different class name.

Deutsch version

English version

@Mhurd does the iOS app or page-library handle the thumb or thumbinner?
Does it relate to this? https://github.com/wikimedia/wikimedia-page-library/blob/9fcfff0f91b47263e4e4f586f172b45669560185/src/transform/WidenImage.css#L15-L21

This looks very much like an image widening bug.

LGoto assigned this task to Mholloway.Mar 27 2019, 3:37 PM
LGoto triaged this task as Normal priority.
LGoto added a project: wikimedia-page-library.
LGoto moved this task from Needs triage to Upcoming on the Product-Infrastructure-Team-Backlog board.

@Mholloway Can you look into this and/or assign to someone else as needed? Thanks!

This is fixed by disabling the display: webkit-flex and display: flex rules from the ancestor div.thumbinner. The style block containing those rules is coming from https://github.com/wikimedia/mediawiki-skins-MinervaNeue/blob/master/resources/skins.minerva.content.styles/hacks.less#L168-L175.

@Mhurd Should styleWideningKeysAndValues be updated to address this scenario? I believe this would be fixed by an update along the lines of https://github.com/wikimedia/wikimedia-page-library/pull/100.

In the long run, we'll work toward avoiding pulling in mostly-extraneous stuff like hacks.less, but I don't think we should block this fix on that effort.

Mhurd added a comment.Apr 4 2019, 10:22 PM

@Mholloway oh sorry i missed this - was out last week :) will take a peek tomorrow.

it seems to be fixed, although the images are not fitting the screen 100%.

https://de.wikipedia.org/api/rest_v1/page/mobile-html/Kienspan

Mholloway closed this task as Resolved.Jul 8 2019, 3:36 PM

Closing per T218928#5180762. Please reopen if this reappears.