| Krinkle | |
| Apr 1 2017, 9:03 PM |
| F9206191: IMG_2277.PNG | |
| Aug 29 2017, 4:19 PM |
| F9206193: IMG_2278.PNG | |
| Aug 29 2017, 4:19 PM |
| F7315664: Screen Shot 2017-04-06 at 11.16.02 AM.png | |
| Apr 6 2017, 6:16 PM |
| F7135200: Screen Shot 2017-04-01 at 14.00.10.png | |
| Apr 1 2017, 9:03 PM |
| F7135210: Screen Shot 2017-04-01 at 14.01.43.png | |
| Apr 1 2017, 9:03 PM |
To reproduce: Visit English Wikipedia main page.
MobileFrontend:
MobileFrontend (auto-scaling disabled):
The auto-scaling rule uses 100%; for width or height which in this cause seems to make it relate to the anchor tag (or table cell) which has no other content, so it results in 0px - making the image invisible.
See also:
T131812: MinervaNeue auto image scaling causes rendering reflows
I'm confused. Where/how are you seeing this?
https://en.m.wikipedia.org/wiki/Main_Page looks fine to me.
Looking at the HTML however, ideally .content a > img would only apply to image links. e.g. .content .image > img
but I don't think we have consistent markup for thumbnails do we?
https://en.m.wikipedia.beta.wmflabs.org/wiki/Main_Page
It looks like the main page in prod hides this section entirely.
This is definitely unrelated to lazy loading images and just as you say related to the max-width being applied on an inline image.
I'm not 100% sure how to fix this and given I can't find an article in the wild that does this I don't see this as a big problem, but it seems like we could replace a for .image in the css rule, however I'm not sure how much we can rely on .image to canonically always be on our thumbnails.... or can we?
This appears to be a local template issue not an issue with MobileFrontend.
The template uses a table with 3 td's with width: 33%.
The td's are taking 33% of space leaving the img tag with zero space to work in.
I've improved this somewhat, https://en.wikipedia.beta.wmflabs.org/wiki/Special:MobileDiff/365653 - maybe TemplateStyles or flex can be used to make this nicer though.
It's not the lazy loaded definitions that cause this, it's the responsive sizing definitions. It's similar to T116318. Specifying an explicit (min-)width on the table cell or something wrapping the inline image will indeed work around this problem.
https://en.wikipedia.beta.wmflabs.org/wiki/Special:MobileDiff/365653 probably good enough.
The change is applied, but the images are still made invisible by the CSS mobile override for image width.
Yeah, width doesn't work for that. You need min-width. https://en.wikipedia.beta.wmflabs.org/w/index.php?title=Template:Wikipedia%27s_sister_projects&diff=369840&oldid=365653
