This thread is resolved. Here is a description of the problem and solution.
Problem:
The customer reported that images in a Toolset template were rendering with a distorted 2:1 aspect ratio in Chrome. Investigation revealed that this issue was caused by Chrome's user agent stylesheet adding a contain-intrinsic-size attribute after the WordPress update to version 6.7. The problem did not occur in other browsers or on a different template.
Solution:
The developers released a hotfix for the affected plugins:
Toolset Blocks 1.6.18
Toolset Access 2.9.2
Customers were advised to update these plugins to their latest versions after creating a full backup.
Relevant Documentation:
https://toolset.com/errata/image-block-displays-wrong-image-size-with-wordpress-6-7/
This is the technical support forum for Toolset - a suite of plugins for developing WordPress sites without writing PHP.
Everyone can read this forum, but only Toolset clients can post in it. Toolset support works 6 days per week, 19 hours per day.
| Sun | Mon | Tue | Wed | Thu | Fri | Sat |
|---|---|---|---|---|---|---|
| - | 9:00 – 12:00 | 9:00 – 12:00 | 9:00 – 12:00 | 9:00 – 12:00 | 9:00 – 12:00 | - |
| - | 13:00 – 18:00 | 13:00 – 18:00 | 13:00 – 18:00 | 13:00 – 18:00 | 13:00 – 18:00 | - |
Supporter timezone: America/Sao_Paulo (GMT-03:00)
This topic contains 4 replies, has 1 voice.
Last updated by 1 month ago.
Assisted by: Mateus Getulio.
__ 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
