Super broad selector for images max-width on WP 5.9

[hvianna]

I recently updated to WP 5.9 and noticed some undesired behavior on images in my custom theme, caused by the CSS declaration below (from ./wp-includes/css/dist/block-library/style.min.css):

html :where(img) {
    height: auto;
    max-width: 100%;
}

This causes images that would previously overflow a smaller container to be "squished" inside it now. Any reason to use such a broad selector on core??

[joyously]

I'm not saying that core styles should have this rule, but it is a recommended practice for themes, even without using object-fit: contain.
Since there was a gap in core, when the height and width attributes were not output, your images could have have them or not. When using height: auto, this overrides any height attribute that is in the HTML, leaving the width as either the attribute or the CSS (if specified in the theme).
Your theme should make sure all images are styled correctly, whether there are attributes or not. CSS overrides attributes, so it makes more sense to not specify width rules, and let the image-specific attribute dictate the width, since the width is chosen by the user for each image.

There was another ticket which was to make sure the width and height attributes were output. When that one was fixed, a lot of people complained because the images were distorted. They needed the style in question to fix it.

I'm surprised it is html :where(img) instead of just img.

[hvianna]

Yeah, on second thought, since when does the core define front-end CSS? Isn't this supposed to be theme/plugin territory?

[butterflymedia]

This also broke Metafizzy's Flickity slider for me and squishing off-canvas images. It's a breaking change that will affect various image containers, such as sliders, carousels, image animations and so on.

I had to override the CSS selector with:

html :where(img) {
    max-width: fit-content;
}

[azouamauriac]

hello there, welcome to WordPress trac! thanks for the repport, please can you provide the steps to reproduces the issue? also some screenshot or video of what happen will be great.

Thanks!

[audrasjb]

Moving for 5.9.2 consideration, but this issue should be reported (and need to be addressed) upstream on Gutenberg's GitHub repository: ​https://github.com/WordPress/gutenberg/issues

[butterflymedia]

Added here, as reference - ​https://github.com/WordPress/gutenberg/issues/39021

[hvianna]

Thanks @butterflymedia ! I added the screenshots below to the GitHub issue.

This is using Kwicks Slider:

WordPress 5.8.2:

WordPress 5.9:

[audrasjb]

Moving to milestone 5.9.3 since we're about to release 5.9.2.

[davidbaumwald]

#55379 was marked as a duplicate.

[audrasjb]

Closing this ticket as reported-upstream since it was fixed on Gutenberg side.
​https://github.com/WordPress/gutenberg/issues/39021

It's on the Gutenberg list for 5.9.3 backports.

[audrasjb]

Thanks everyone for reporting the issue 🙌

[markparnell]

#55236 was marked as a duplicate.