Make WordPress Core

Opened 16 months ago

Closed 15 months ago

Last modified 11 months ago

#55229 closed defect (bug) (reported-upstream)

Super broad selector for images max-width on WP 5.9

Reported by: hvianna's profile hvianna Owned by:
Milestone: Priority: normal
Severity: major Version: 5.9.1
Component: Formatting Keywords:
Focuses: css Cc:

Description

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??

Change History (14)

#1 @joyously
16 months ago

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.

#2 @hvianna
16 months ago

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

#3 @butterflymedia
15 months ago

  • Severity changed from normal to major

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;
}

This ticket was mentioned in Slack in #core by butterflymedia. View the logs.


15 months ago

#5 @azouamauriac
15 months ago

  • Keywords reporter-feedback needs-screenshots added

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!

#6 @audrasjb
15 months ago

  • Keywords close added
  • Milestone changed from Awaiting Review to 5.9.2

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

#8 @hvianna
15 months ago

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

This is using Kwicks Slider:

WordPress 5.8.2:
https://user-images.githubusercontent.com/1033735/155368547-8cd6854f-6c3b-430e-90e7-f31edc586648.png

WordPress 5.9:
https://user-images.githubusercontent.com/1033735/155368544-995a738c-8d96-420a-a1bc-1b0e8976dfdb.png

#9 @audrasjb
15 months ago

  • Milestone changed from 5.9.2 to 5.9.3

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

#10 @davidbaumwald
15 months ago

#55379 was marked as a duplicate.

This ticket was mentioned in Slack in #core by audrasjb. View the logs.


15 months ago

#12 @audrasjb
15 months ago

  • Keywords reporter-feedback needs-screenshots close removed
  • Milestone 5.9.3 deleted
  • Resolution set to reported-upstream
  • Status changed from new to closed

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.

#13 @audrasjb
15 months ago

Thanks everyone for reporting the issue 🙌

#14 @markparnell
11 months ago

#55236 was marked as a duplicate.

Note: See TracTickets for help on using tickets.