1564069 - CSS-Grid Image height/dimensions not correct due to wrong width and height attributes, with layout.css.width-and-height-map-to-aspect-ratio.enabled=true

Status: RESOLVED DUPLICATE of bug 1565690

(Core :: Layout: Images, Video, and HTML Frames, defect, P3)

Description

[Stef]

User Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.14; rv:69.0) Gecko/20100101 Firefox/69.0

Steps to reproduce:

I used a css grid and have images inside which are set to "width:100%" and "height: auto" by css. I made a codepen: https://codepen.io/LHT/pen/LKgqBb.
This bug seems to be newly introduced. I can't see it in Firefox Quantum 64 but only in Firefox Developer Edition 69.

Actual results:

The images are stretched because the correct proportional image dimensions are not taken into account. If you remove the image height from the html code, it seems to be work.

Expected results:

It should not stretch or compress the image but should resize it proportionally to the actual image dimensions.

Comment 1

[Alice0775 White]

Regression window:
https://hg.mozilla.org/integration/autoland/pushloghtml?fromchange=fe2a14fc3e45f9f09fc46a6e913a824025d47045&tochange=fd9cb42cee2978361d8210c9034a408b62bdb741

Regressed by: Bug 1547231

Comment 2

[Emilio Cobos Álvarez (:emilio)]

Are you hitting this on a real website?

This is because you're saying width="200" and height="200" even though those attributes do not reflect the real size of the image. So we treat that as if the image had a 1x1 intrinsic ratio, which in this case is not true. See https://github.com/WICG/intrinsicsize-attribute/issues/16.

I added the code in a way that it matches the proposed behavior of an aspect-ratio CSS property, but an alternative if this is common would be to use the image ratio first, if appropriate.

You can see the details in that thread and in this intent to experiment.

This won't be enabled on release yet, and should be auto-fixed in a later dev edition, since layout.css.width-and-height-map-to-aspect-ratio.enableds default value will be false then.

Comment 3

[Stef]

yes. The codepen is just an example but the real use case exists. I have one grid that handles multiple different images. I set the image properties only once for each image to speed up rendering, the height of each image can be different though. The "fix" that works for me is to remove the height from the html but it shouldn't be relevant since I'm overwriting it with css to auto. I only add the height and width to be more accessible and let the browser know an approximate height of the images so it can reserve a space already.

Thanks for the other info! I guess it could have worked but I'd assumed that the css should overwrite.

Comment 4

[Emilio Cobos Álvarez (:emilio)]

I set the image properties only once for each image to speed up rendering, the height of each image can be different though.

Can you elaborate on this? There are multiple sizes involved:

• The "intrinsic" image size (the size of the image as opened on a raw page or an image viewer).
• The image size specified with width and height.
• The image size that the rendering engine ends up determining.

I don't understand the "I set the image properties only once for each image to speed up rendering". Do you mean:

• I set width and height attributes to the same value for all imagesto speed up rendering, but the intrinsic width and height of the image ends up being different for each image.
  • If this is the case I'm a bit confused, since the only way the attributes help is if their ratio ends up being the same as the intrinsic size of the image.
• I set the CSS properties once?
• Something else?

I only add the height and width to be more accessible and let the browser know an approximate height of the images so it can reserve a space already.

FWIW this only helps if the attributes are right, if the image ends up resizing then it's the same speed whether they resize from zero to the final size or from something else to the final size. This holds for every browser, as far as I can tell.

Comment 6

[Emilio Cobos Álvarez (:emilio)]

Should be fixed by bug 1565690. I found a couple real pages broken by that change, so I made it so it's only a hint for the engine in case the page gets it wrong.