Change Details

=== Steps to Reproduce # Set the screen width 450px. # Visit https://http://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 {F24216168}, 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.

=== 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 {F24216168}, 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.

=== Steps to Reproduce # Set the screen width 450px. # Visit https://http://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 {F24216168}, 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.