Change Details

Note: There are several lazy loaded images bugs T207929, T199351, T209183. We'll probably want to fix these 3 bugs together. The page [[ https://en.m.wikipedia.org/wiki/Wikipedia:Extended_image_syntax#Vertical_alignment | WP:EIS#Vertical_alignment ]] has some examples of the vertical-align parameter for images. They don't appear to work on Minerva; the image tag has class="image-lazy-loaded" and no vertical-align in the style parameter. Copying and pasting that section's code into the [[ https://en.m.wikipedia.org/w/index.php?title=Wikipedia:Sandbox&oldid=865647270 | sandbox (old revision) ]] works however; the images have no lazy-loading class and style="vertical-align: text-top" (or whatever was requested). I don't have a reliable way to force lazy-loading of images on and off and so guarantee that it is the cause of the problem but it seems to be the cause; I did some further similar tests and the pattern persisted. (Edit: references to MinervaNeue removed as the same bug can be achieved with the Monobook or Vector skin when using URLs like [[https://en.m.wikipedia.org/wiki/Wikipedia:Extended_image_syntax?useskin=monobook]].) = Developer notes Style attribute does not get copied across when an image gets lazy loaded. The problematic function is inside includes/transforms/LazyImageTransform.php (doRewriteImagesForLazyLoading) If the style is copied across, with the width and height appended at the end all should be good ``` $style = $img->getAttribute( 'style' ) || ''; $imgPlaceholder->setAttribute( 'style', $style . $dimensionsStyle ); ``` Appending at the end is important as we don't use an img tag for the placeholder, so if width and height attributes are used we need to retain them if they exist. If a style width/height is already defined we will define twice which is harmless. There is obviously risk in copying styles meant for an img tag across to a placeholder, so we may also want to consider having an attribute whitelist to make sure we only copy across ones we know to be harmless e.g. vertical-align. == Replication Create the following local content ``` Text == Lazy section == <code>baseline</code>: [[File:Flag of Hungary vertical.svg|baseline|frameless|upright=0.1|link=|alt=]]Align the bottom of the image with the [[Baseline (typography)|baseline]] of the text. ``` Open the browser in mobile emulator mode (with sections collapsed). Drop connection to super slow and expand the section.

> NOTE: There are several lazy loaded images bugs T207929, T199351, T209183. We'll probably want to fix these 3 bugs together. The page [[ https://en.m.wikipedia.org/wiki/Wikipedia:Extended_image_syntax#Vertical_alignment | WP:EIS#Vertical_alignment ]] has some examples of the vertical-align parameter for images. They don't appear to work on Minerva; the image tag has class="image-lazy-loaded" and no vertical-align in the style parameter. Copying and pasting that section's code into the [[ https://en.m.wikipedia.org/w/index.php?title=Wikipedia:Sandbox&oldid=865647270 | sandbox (old revision) ]] works however; the images have no lazy-loading class and style="vertical-align: text-top" (or whatever was requested). I don't have a reliable way to force lazy-loading of images on and off and so guarantee that it is the cause of the problem but it seems to be the cause; I did some further similar tests and the pattern persisted. (Edit: references to MinervaNeue removed as the same bug can be achieved with the Monobook or Vector skin when using URLs like [[https://en.m.wikipedia.org/wiki/Wikipedia:Extended_image_syntax?useskin=monobook]].) = Developer notes Style attribute does not get copied across when an image gets lazy loaded. The problematic function is inside includes/transforms/LazyImageTransform.php (doRewriteImagesForLazyLoading) If the style is copied across, with the width and height appended at the end all should be good ``` $style = $img->getAttribute( 'style' ) || ''; $imgPlaceholder->setAttribute( 'style', $style . $dimensionsStyle ); ``` Appending at the end is important as we don't use an img tag for the placeholder, so if width and height attributes are used we need to retain them if they exist. If a style width/height is already defined we will define twice which is harmless. There is obviously risk in copying styles meant for an img tag across to a placeholder, so we may also want to consider having an attribute whitelist to make sure we only copy across ones we know to be harmless e.g. vertical-align. == Replication Create the following local content ``` Text == Lazy section == <code>baseline</code>: [[File:Flag of Hungary vertical.svg|baseline|frameless|upright=0.1|link=|alt=]]Align the bottom of the image with the [[Baseline (typography)|baseline]] of the text. ``` Open the browser in mobile emulator mode (with sections collapsed). Drop connection to super slow and expand the section.

Note:> NOTE: There are several lazy loaded images bugs T207929, T199351, T209183. We'll probably want to fix these 3 bugs together. The page [[ https://en.m.wikipedia.org/wiki/Wikipedia:Extended_image_syntax#Vertical_alignment | WP:EIS#Vertical_alignment ]] has some examples of the vertical-align parameter for images. They don't appear to work on Minerva; the image tag has class="image-lazy-loaded" and no vertical-align in the style parameter. Copying and pasting that section's code into the [[ https://en.m.wikipedia.org/w/index.php?title=Wikipedia:Sandbox&oldid=865647270 | sandbox (old revision) ]] works however; the images have no lazy-loading class and style="vertical-align: text-top" (or whatever was requested). I don't have a reliable way to force lazy-loading of images on and off and so guarantee that it is the cause of the problem but it seems to be the cause; I did some further similar tests and the pattern persisted. (Edit: references to MinervaNeue removed as the same bug can be achieved with the Monobook or Vector skin when using URLs like [[https://en.m.wikipedia.org/wiki/Wikipedia:Extended_image_syntax?useskin=monobook]].) = Developer notes Style attribute does not get copied across when an image gets lazy loaded. The problematic function is inside includes/transforms/LazyImageTransform.php (doRewriteImagesForLazyLoading) If the style is copied across, with the width and height appended at the end all should be good ``` $style = $img->getAttribute( 'style' ) || ''; $imgPlaceholder->setAttribute( 'style', $style . $dimensionsStyle ); ``` Appending at the end is important as we don't use an img tag for the placeholder, so if width and height attributes are used we need to retain them if they exist. If a style width/height is already defined we will define twice which is harmless. There is obviously risk in copying styles meant for an img tag across to a placeholder, so we may also want to consider having an attribute whitelist to make sure we only copy across ones we know to be harmless e.g. vertical-align. == Replication Create the following local content ``` Text == Lazy section == <code>baseline</code>: [[File:Flag of Hungary vertical.svg|baseline|frameless|upright=0.1|link=|alt=]]Align the bottom of the image with the [[Baseline (typography)|baseline]] of the text. ``` Open the browser in mobile emulator mode (with sections collapsed). Drop connection to super slow and expand the section.