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

kienspan.png (800×480 px, 211 KB)

Event Timeline

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

Screenshot at Mar 21 16-01-54.png (674×2 px, 826 KB)

English version

Screenshot at Mar 21 16-07-09.png (174×728 px, 42 KB)

@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 triaged this task as Medium priority.
LGoto added a project: wikimedia-page-library.

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

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

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