Issue on Google Chrome with lazy=load images = sizes=auto + css width: fit-content

[mosne]

Bug Report

Description

WordPress 6.7 adds sizes=”auto” for lazy-loaded images.
On Chrome those images are rendered smaller.
this happens only in chrome. On Firefox and Safari the srcset is loaded correctly.
I would say that is more a Google Chrome issue than a WordPress issue... but better double check :)

Environment

• WordPress: 6.7-RC2-59332
• PHP: 7.4.30
• Server: Apache/2.4.43 (Unix)
• Database: mysqli (Server: 8.0.16 / Client: mysqlnd 7.4.30)
• Browser: Chrome 130.0.0.0
• OS: macOS
• Theme: Twenty Twenty-Five 1.0
• MU Plugins: None activated
• Plugins:
  • Create Block Theme 2.6.0
  • Test Reports 1.1.0
  • Theme Check 20231220
  • WordPress Beta Tester 3.6.1
  • WordPress Importer 0.8.3

Steps to Reproduce

1. add to a page several large images
2. the first 3 images are loaded without load=lazy for better performance
3. 🐞 starting from the third (only in Chrome and only on the front office) the Bug occurs. the image size is smaller.

Expected Results

1. all the images are loaded large

Actual Results

1. ❌ the wrong size is loaded whene load=lazy + size=auto

Additional Notes

• removing the width:fit-content seems to fix the isseu

Supplemental Artifacts

• here a video of the bug

​https://www.loom.com/share/450632ee4bf34aa3ba27720b26a7f0a4?sid=3e6dc4c4-f78e-44fa-9719-373acb2f3242

• also visible here at the end of the video (for ticket #62272)

​https://kdrive.infomaniak.com/app/share/565596/5078577d-176e-4877-aa1c-edc96fe041f0

[flixos90]

Some updates:

• This bug was introduced by ​https://github.com/WordPress/gutenberg/pull/66217.
  • Also see related follow-up fix ​https://github.com/WordPress/gutenberg/pull/66643.
• This is not a Chrome bug, but it's a bug in Core / Gutenberg. Here's why:
  • Initially there is no content, so the calculated layout width is 0px, which gets overridden by contain-intrinsic-size: 300px 150px from the UA stylesheet.
  • This is outlined in the HTML specification here: ​https://html.spec.whatwg.org/multipage/rendering.html#img-contain-size
  • Specifying width: content-fit overrides the width CSS property as inherited from the image's width attribute, and that in combination with the UA stylesheet leads to the bug.

@juanfra Based on ​https://github.com/WordPress/gutenberg/pull/66217, it looks like this change was implemented because of a problem in Firefox. However, as outlined above it introduces a problem in Chrome which however is not Chrome specific, but directly tied to the rule explained in the linked section of the HTML standard.

As such, I think we need to reconsider this fix, similar to how in ​https://github.com/WordPress/gutenberg/pull/66643 you already fixed it for SVG images. A potential solution would be to omit the width: fit-content for any images with loading="lazy" and sizes="auto", in addition to how it's already omitted for SVG.

[flixos90]

This needs to be fixed in Gutenberg first and then backported, so I opened a PR in ​https://github.com/WordPress/gutenberg/pull/66801.

[flixos90]

Per discussion starting in ​https://github.com/WordPress/gutenberg/pull/66801#issuecomment-2460877322, potentially a better solution is a revert of the original fix, at least for the time being. The new CSS rule is too risky and already causing unexpected side effects.

[juanfra]

Thank you Paolo for reporting.

Thank you for looking into this @flixos90 - The original fix has been reverted here ​https://github.com/WordPress/gutenberg/pull/66804

[rcorrales]

A new PR was created to remove the width: fit-content property:
​https://github.com/WordPress/gutenberg/pull/66804

It was cherry-picked to be included in the 6.7 release:
​https://github.com/WordPress/gutenberg/commit/e503a390e8cbfabb28049babc97489eb0c3827e1

I performed some tests and the fit-content removal seems to solve the small image issues in Chrome and Chromium-based browsers.

Edit: I didn't see the previous comment until I added my comment and refreshed, so apologies for re-stating the same.

[joemcgill]

Thanks for confirming, @rcorrales. @flixos90 are we ok to close this as fixed?

[flixos90]

Yes, thanks for the ping. The revert of the code introducing this bug was committed and backported to 6.7 via [59369].

[flixos90]

In 59415:

Media: Avoid images with sizes=auto to be displayed downsized in supporting browsers.

Based on the user agent stylesheet rules outlined in ​https://html.spec.whatwg.org/multipage/rendering.html#img-contain-size, images that have sizes=auto while applying width: auto or width: fit-content would be constrained to only 300px width.

This changeset overrides said user agent stylesheet rule with a much larger constraint, to avoid the problem.

Additionally, it introduces a filter wp_img_tag_add_auto_sizes which can be used to opt out of the functionality, as an additional measure.

Props joemcgill, flixos90, dooperweb, SirLouen, azaozz, mukesh27, apermo.
Fixes #62413.
See #61847, #62345.

[desrosj]

In 59435:

Media: Avoid images with sizes=auto to be displayed downsized in supporting browsers.

Based on the user agent stylesheet rules outlined in ​https://html.spec.whatwg.org/multipage/rendering.html#img-contain-size, images that have sizes=auto while applying width: auto or width: fit-content would be constrained to only 300px width.

This changeset overrides said user agent stylesheet rule with a much larger constraint, to avoid the problem.

Additionally, it introduces a filter wp_img_tag_add_auto_sizes which can be used to opt out of the functionality, as an additional measure.

Reviewed by desrosj, joemcgill.
Merges [59415] to the 6.7 branch.

Props joemcgill, flixos90, dooperweb, SirLouen, azaozz, mukesh27, apermo.
Fixes #62413.
See #61847, #62345.