[Assigned] Chrome browser rendering image with 2:1 aspect ration

[Author]

Posts

[chrisL-13]

__ I am trying to:__
Make the featured image of a toolset type appear normally

__Link to a page where the issue can be seen:__
hidden link

__I expected to see:__
A square rendering of a sample image

__Instead, I got:__
A squished rendering of said image.

The uploaded image is square and not squished.

The image block settings in the page template are set to full size and 100% width and 100% height via CSS. See attached.

But when I inspect the image in Chrome dev tools, I see that one of the CSS declaration in play is:

img:is([sizes="auto" i], [sizes^="auto," i]) {
contain: size !important;
contain-intrinsic-size: 300px 150px;
}

Chrome attributes this to the 'user agent stylesheet' which would seem to be Chrome itself. It renders like this in Chrome on my desktop and on my laptop. The image doesn't get 'squished on my partner's tablet, nor does it on Firefox on my desktop.

I've searched what I'm told is the default user agent stylesheet for Chrome (hidden link) but I cannot see anything that would set the container-intrinsic-size attribute so strangely.

This is only happening on this particular template. I have a page and another template that render the featured image for the contact type as expected.

The full markup for the rendered image on the problem template is as follows:

<img decoding="async" width="600" height="600" loading="lazy" src="hidden link" alt="" class="wp-image-12933" srcset="hidden link 600w, hidden link 300w, hidden link 150w" sizes="auto, (max-width: 600px) 100vw, 600px">

I can't see where from that you get width: 300 height 150.

Please help. My client won't like their faces getting squished.

cmkl

[Mateus Getulio]

Hello,

Thanks for contacting us.

Before your ticket is assigned to one of my colleagues, please allow me to walk you through some initial debugging steps. This will help speed up the support process.

We're getting similar reports after the latest WordPress update to version 6.7:

https://toolset.com/errata/image-block-displays-wrong-image-size-with-wordpress-6-7/

Can you please temporarily downgrade to version 6.6.2 and confirm if the issue happens in there as well?

This will help us identify the next steps.

Thank you, please let us know.
Mateus

[chrisL-13]

Downgrading to WP 6.6.2 resolves the issue. Images that were squished are now rendering as expected. There are no user stylesheet selectors that set the 'contain-intrinsic-size' at all. The admin interface behaves a lot better too. The menu items in the top nav behave a lot better. The 'View on the front end' link works.

[Mateus Getulio]

Thank you for your updates.

Our developers identified the issue and they're working actively to release a hotfix for this issue as soon as possible. A new release is expected within the next few days.

I'll let you know here in the ticket when a patch is available.

We apologize for the inconveniente and thank you for your patience.