Make WordPress Core

Opened 2 years ago

Closed 2 years ago

Last modified 21 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
2 years 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
2 years 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
2 years 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.


2 years ago

#5 @azouamauriac
2 years 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
2 years 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
2 years 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
2 years 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
2 years ago

#55379 was marked as a duplicate.

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


2 years ago

#12 @audrasjb
2 years 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
2 years ago

Thanks everyone for reporting the issue 🙌

#14 @markparnell
21 months ago

#55236 was marked as a duplicate.

Note: See TracTickets for help on using tickets.