The page 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 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 == <span style="break-inside:avoid-column;"><code>baseline</code>:<br /> [[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.</span>
Open the browser in mobile emulator mode (with sections collapsed).
Drop connection to super slow and expand the section.
QA steps
- Visit https://en.m.wikipedia.beta.wmflabs.org/wiki/Vertical_alignment_image_test#Vertical_alignment (mobile)
- Verify the images have different vertical alignments (text-top and text-bottom) that match the description
Example of failed test = alignments are the same (middle):
QA Results - Beta
| AC | Status | Details |
|---|---|---|
| 1 | ✅ | T207929#6335365 |
QA Results - Prod
| AC | Status | Details |
|---|---|---|
| 1 | ✅ | T207929#6390099 |
