Steps to Reproduce
- Set the screen width 450px.
- Visit https://reading-web-staging.wmflabs.org//w/index.php?title=Barack_Obama&oldid=852588387
- Open DevTools and disable the internet connection (go offline).
- Scroll to the "Legacy" section.
- Open "Legacy" section
- Observe gray image placeholder
Expected Results
- Placeholder is same dimensions as the image and constrained to the image viewport
Actual Results
- Placeholders are the unconstrained image dimensions , is larger than the viewport and it is possible to horizontally scroll
Environments Observed
Browser Version
- Chromium v67.0.3396.99
OS Version
- Ubuntu v18.04 64b
Device Model
- Desktop
Device Language
- English
Developer notes
The issue is related to the use of display: flex on the .thumbinner element. Removing display: flex or assigning a max-width to the child element makes the issue go away.
I notice that setting the flex-direction to column (currently default row) makes this go away.
.content a > img, .content a > .lazy-image-placeholder, .content noscript > img {
max-width: 100%;
}needs to be expanded to include a.image
The image in question has width 512px set.
