6.7.1. Pictures height

[fredel]

This is a follow-up to #62413.

Hey guys, after the fix (62413) & upgrade in 6.7.1 i have problems with the picture height with "sizes= auto" ((here: sizes="auto, (max-width: 620px) 100vw, 620px") in Chrome based Browsers. The picture height is wrongly pushed to 1500px.

Browsers Tested:

Issue occurs on: Chrome, Opera
Works as expected on: Firefox

Thx

Full code:

<img src="https://www.bergtour-online.de/wp-content/uploads/2024/11/Ritzau-Alm-620x350.jpg" class="attachment-featured-image size-featured-image wp-post-image" alt="Ritzau Alm" decoding="async" loading="lazy" srcset="https://www.bergtour-online.de/wp-content/uploads/2024/11/Ritzau-Alm-620x350.jpg 620w, https://www.bergtour-online.de/wp-content/uploads/2024/11/Ritzau-Alm-300x169.jpg 300w, https://www.bergtour-online.de/wp-content/uploads/2024/11/Ritzau-Alm-800x450.jpg 800w, https://www.bergtour-online.de/wp-content/uploads/2024/11/Ritzau-Alm-768x432.jpg 768w, https://www.bergtour-online.de/wp-content/uploads/2024/11/Ritzau-Alm-1536x864.jpg 1536w, https://www.bergtour-online.de/wp-content/uploads/2024/11/Ritzau-Alm.jpg 1920w" sizes="auto, (max-width: 620px) 100vw, 620px" draggable="false">

[fredel]

PS: If i deactivate Lazy Load (e.g. via ​https://wordpress.org/plugins/disable-lazy-loading/ Plugin) its working as it should.

Prevents this:

img:is([sizes="auto" i], [sizes^="auto," i]) {
    contain-intrinsic-size: 3000px 1500px;
}

[rinkalpagdar]

Hello @fredel Greetings!
It might be an issue with a third-party plugin because I couldn't reproduce the issue on a fresh WP installation with the default theme and no plugins.
Thanks!

[fredel]

thx a lot @rinkalpagdar - deactivated all plugins with no effect, but i think #62413 also was working for some pictures on default theme. so seems more like another topic handling the lazy load pictures?!

[im3dabasia1]

Thank you @fredel , I was able to reproduce the issue you faced.

Reproduction Report

Description

This report validates whether the issue can be reproduced.

Environment

• WordPress: 6.7.1
• PHP: 8.1.29
• Server: nginx/1.16.0
• Database: mysqli (Server: 8.0.16 / Client: mysqlnd 8.1.29)
• Browser: Chrome 129.0.0.0
• OS: macOS
• Theme: Twenty Twenty-Five 1.0
• MU Plugins: None activated
• Plugins:
  • Test Reports 1.2.0
  • WordPress Beta Tester 3.6.1

Actual Results

1. ✅ Error condition occurs (reproduced).

Additional Notes

• Created a new post
• Opened the code editor
• Pasted this code in it, as suggested above

<img src="https://www.bergtour-online.de/wp-content/uploads/2024/11/Ritzau-Alm-620x350.jpg" class="attachment-featured-image size-featured-image wp-post-image" alt="Ritzau Alm" decoding="async" loading="lazy" srcset="https://www.bergtour-online.de/wp-content/uploads/2024/11/Ritzau-Alm-620x350.jpg 620w, https://www.bergtour-online.de/wp-content/uploads/2024/11/Ritzau-Alm-300x169.jpg 300w, https://www.bergtour-online.de/wp-content/uploads/2024/11/Ritzau-Alm-800x450.jpg 800w, https://www.bergtour-online.de/wp-content/uploads/2024/11/Ritzau-Alm-768x432.jpg 768w, https://www.bergtour-online.de/wp-content/uploads/2024/11/Ritzau-Alm-1536x864.jpg 1536w, https://www.bergtour-online.de/wp-content/uploads/2024/11/Ritzau-Alm.jpg 1920w" sizes="auto, (max-width: 620px) 100vw, 620px" draggable="false">

Supplemental Artifacts

​https://jmp.sh/hNpRse0c

[fredel]

thx a lot guys, maybe its related to this fix suggested by @flixos90 !? ;/ see screenshot ​https://imgur.com/iY6rfIT

[desrosj]

Connecting the comment in the last comment from @fredel: comment:36:ticket:62413.

When sharing images, please upload them directly to the Trac ticket. Image service sites disappear, images are removed, etc. and sometimes tickets are open for a very long time.

[fredel]

Replying to desrosj:

sorry, screenshot was that comment: https://core.trac.wordpress.org/ticket/62413#comment:36
it seems the large height (1500px) comes from this fix...

Connecting the comment in the last comment from @fredel: comment:36:ticket:62413.

When sharing images, please upload them directly to the Trac ticket. Image service sites disappear, images are removed, etc. and sometimes tickets are open for a very long time.

[rinkalpagdar]

Hello @im3dabasia1
Thanks for providing the test report, but it's not an issue with WordPress. I followed the same process, like creating a new post with suggested HTML, and the problem appeared on the front side, but when I converted HTML to Gutenberg blocks, it disappeared. So I think it's not the issue of WordPress blocks.

[fredel]

PS: If i put

add_filter('wp_img_tag_add_auto_sizes', '__return_false');

in functions.php of the theme it works corretly.

[poena]

#62532 was marked as a duplicate.

[poena]

#62527 was marked as a duplicate.

[mukesh27]

#62576 was marked as a duplicate.

Trac ticket: https://core.trac.wordpress.org/ticket/62515

These PR update core CSS to align with Google Chrome implementation. In most issue the sites uses height:auto CSS rules so it will stretch to 1500px per CSS that implemented through PR #7813.

Per ​https://issues.chromium.org/issues/352077687#comment5, either we should pass the height & width for image or it will load 300X150 dimensions.

This is working as intended based on the spec definition for sizes="auto"

The user agent stylesheet change is based on the rendering section of the html spec:
​https://html.spec.whatwg.org/#img-contain-size

The following note is present in the spec:
"In addition, it is strongly encouraged to specify dimensions using the width and height attributes or with CSS. Without specified dimensions, the image will likely render with 300x150 dimensions because sizes="auto" implies contain-intrinsic-size: 300px 150px in the Rendering section."
​https://html.spec.whatwg.org/#sizes-attributes

Specifying the images dimensions should work around this problem.

@mukeshpanchal27 This is not a proper fix, as it breaks the behavior again that this is fixing in the first place.

We must not use exactly what Google Chrome uses, because that's precisely what caused the other bug.

Thanks for review. As a side effect how we solve the height issue for image as chrome return 150px and WP core return 1500px?

Closing as it re-introduce original issue reported at https://core.trac.wordpress.org/ticket/62413

[mayanktripathi32]

#62576 was marked as a duplicate.

[joemcgill]

@fredel thanks for the additional details about your use case. One thing that I notice when inspecting the markup you shared is that auto-sizes, (i.e., sizes="auto, ...") is being added even though the img element doesn't include height or width attributes.

This shouldn't happen with the implementation from WordPress, so I'm curious if you know of any additional plugins or filters that would be stripping the dimensions after WordPress generates the markup?

For anyone else experiencing this issue when upgrading to 6.7.1, I would suggest trying the same filter that is working for @fredel:

// Disable auto-sizes.
add_filter('wp_img_tag_add_auto_sizes', '__return_false');

[daveklep]

That code worked for me too. Thanks

Replying to fredel:

PS: If i put

add_filter('wp_img_tag_add_auto_sizes', '__return_false');

in functions.php of the theme it works corretly.

[joemcgill]

Moving this to the 6.7.2 milestone for visibility while tracking additional reports related to this issue.

[fredel]

Replying to joemcgill:

hey sorry late reply, strange: i just checked & disabled all plugins without making a difference, so problem should be s.w. else? :/ maybe its inside the theme but tbh i am just a beginner and the theme is quite old and not supported.. but problem seems to appear also on other sites.. thx in any case

@fredel thanks for the additional details about your use case. One thing that I notice when inspecting the markup you shared is that auto-sizes, (i.e., sizes="auto, ...") is being added even though the img element doesn't include height or width attributes.

This shouldn't happen with the implementation from WordPress, so I'm curious if you know of any additional plugins or filters that would be stripping the dimensions after WordPress generates the markup?

For anyone else experiencing this issue when upgrading to 6.7.1, I would suggest trying the same filter that is working for @fredel:

// Disable auto-sizes.
add_filter('wp_img_tag_add_auto_sizes', '__return_false');

[lausianne]

https://core.trac.wordpress.org/ticket/62413 is marked as "fixed", although it clearly isn't. I'm glad you guys are still working on it here.
Fortunately, the filter works.

[joemcgill]

I'm moving this out of the next minor milestone given the lack of any specific reproducible steps, but will leave it open to continue tracking ways we could improve the existing implementation.

[skithund]

Here's a reproduction for triggering contain-intrinsic-size stretching using object-fit: cover on image, which is being loaded lazily and is using sizes="auto".

Browser bug in Chrome or developer error? Markup is taken from custom WordPress theme, reduced and switched to using placeholder images.

Code in JSFiddle ​https://jsfiddle.net/vbwh9s85/3/

<figure>
  <img
     src="https://placehold.co/300x150"
     alt=""
     sizes="auto, (max-width: 300px) 100vw, 300px"
     loading="lazy"
     srcset="https://placehold.co/150x75 150w, https://placehold.co/300x150 300w, https://placehold.co/500x250 500w, https://placehold.co/1024x512 1024w"
     heigth="150"
     width="300"
  >
</figure>

<figure>
  <img
     src="https://placehold.co/300x150"
     alt=""
     sizes="(max-width: 300px) 100vw, 300px"
     loading="lazy"
     srcset="https://placehold.co/150x75 150w, https://placehold.co/300x150 300w, https://placehold.co/500x250 500w, https://placehold.co/1024x512 1024w"
     heigth="150"
     width="300"
  >
</figure>

<style>
img:is([sizes="auto" i], [sizes^="auto," i]) {
  contain-intrinsic-size: 3000px 1500px;
}
figure {
  display: block;
  width: 200px;
}
img {
  object-fit: cover;
}
</style>

[audrasjb]

As per today's bug scrub: There is a workaround hook provided in the ticket, but still no patch so I'm moving it to 6.9. Feel free to move it back to 6.8 if a patch is ready for testing by next week.