WordPress 6.7 sizes="auto" is messing featured image on chrome mobile.

[maciejmackowiak]

WordPress 6.7 added sizes=”auto” for some images.
In wp-admin on chrome when we have the classic editor plugin active the featured image is "squashed".
This seems to be the issues with css rule height: auto for #postimagediv .inside img which cannot be simply overriden, it needs to be deleted to fix the issue.

The easiest way to reproduce is to set featured image to any square image.

[sainathpoojary]

Reproduction Report

Description

This report validates whether the issue can be reproduced.

Environment

• WordPress: 6.7.1
• PHP: 8.1.29
• Server: nginx/1.16.0
• Database: mysqli (Server: 8.0.16 / Client: mysqlnd 8.1.29)
• Browser: Chrome 131.0.0.0
• OS: macOS
• Theme: Twenty Twenty-Five 1.0
• MU Plugins: None activated
• Plugins:
  • Classic Editor 1.6.6
  • Test Reports 1.2.0

Actual Results

1. ✅ Error condition occurs.

Supplemental Artifacts

Remove height: auto from #postimagediv .inside img to prevent distortion of featured images in the Classic Editor.

Trac ticket: #62597

[abcd95]

Test Report

Description

This report validates that the indicated patch works as expected.

Environment

• WordPress: 6.7.1
• PHP: 8.1.29
• Server: nginx/1.16.0
• Database: mysqli (Server: 8.0.16 / Client: mysqlnd 8.1.29)
• Browser: Chrome 131.0.0.0
• OS: macOS
• Theme: Twenty Twenty-Five 1.0
• Plugins:
  • Classic Editor 1.6.6

Actual Results

✅ Issue resolved with patch.

Supplemental Artifacts

Screenshot - ​https://postimg.cc/62kDGbkG

[sukhendu2002]

Test Report

Description

This report validates whether the indicated patch works as expected.

Patch tested: ​https://github.com/WordPress/wordpress-develop/pull/7910

Environment

• WordPress: 6.8-alpha-59274-src
• PHP: 8.2.26
• Server: nginx/1.27.3
• Database: mysqli (Server: 8.0.40 / Client: mysqlnd 8.2.26)
• Browser: Chrome 131.0.0.0
• OS: macOS
• Theme: Twenty Twenty-Five 1.0
• MU Plugins: None activated
• Plugins:
  • Classic Editor 1.6.6
  • Test Reports 1.2.0

Actual Results

1. ✅ Issue resolved with patch.

Supplemental Artifacts

Before

​https://utfs.io/f/TTyF6MLuAyHDeFFbRaerQjuAYVHZvEhTSDrJIM8mRCfKXya7

After

​https://utfs.io/f/TTyF6MLuAyHDfX4HnIyUy7JRH3j6GQamK94Eq8WIpX2sYnuC

[archon810]

Great! Can we hope for inclusion in WordPress 6.7.2?

[mukesh27]

Hi there, Thanks for ticket.

Instead of removing the CSS we should add CSS that we added in frontend in [59415]

img:is([sizes="auto" i], [sizes^="auto," i]) {
    contain-intrinsic-size: 3000px 1500px;
}

[sainathpoojary]

hey @mukesh27,

I attempted to implement the provided CSS solution:

img:is([sizes="auto" i], [sizes^="auto," i]) {
    contain-intrinsic-size: 3000px 1500px;
}

However, this resulted in behavior that seems different from what we had in WordPress v6.6.1. Here’s the comparison:

​https://utfs.io/f/PL8E4NiPUWyODJv0JdAHytsWpNIfogBi6bRx3aQ5ZFMdLhY1

But after adding the suggested CSS, this is the current result:

​https://utfs.io/f/PL8E4NiPUWyOqSCREtFX9AiSFV8fHmyxUp5oh3rcqWCNB1LI

This issue appears to be linked to the fact that we previously set height: auto, which allowed the image to take its contain-intrinsic-size (1500px), as shown in the preview below:

Also, I noticed some inconsistencies between Firefox and Chrome after following thecontain-intrinsic-size approach:

Although removing height:auto was working as intended because it was taking the actual height of the image

While the removal of height: auto behavior seems to work as expected, I’m curious about your thoughts on this. Could there be another approach to fix the issue while maintaining consistency across browsers? Any advice would be appreciated!

[archon810]

Can the dev team please prioritize the fix for the next hotfix release? The icons have been looking broken for weeks.

Alternately, I think we could consider disabling auto-sizes prior to generating this image markup in _wp_post_thumbnail_html() ​here.

[joemcgill]

I've left some feedback on the PR. @sainathpoojary are you able to update the approach?

[sainathpoojary]

Hey @joemcgill,

I’ve updated the PR to remove width: auto as suggested and have tested the featured image with multiple image sizes. Whenever you have a moment, I’d appreciate it if you could take a look.

Testing video: ​https://rioudcpuyg.ufs.sh/f/PL8E4NiPUWyOSGEvqvLiQ4fwdzrJyI7ZFLWB3XOnMKUARmPD

Thanks @SainathPoojary. ​bc6461f is almost right. I think we need to keep height: auto; that was removed in ​9e41eae.

[joemcgill]

In 59773:

Post Thumbnails: Fix squashed featured image in wp-admin.

This updates the CSS for featured images in the classic editor that caused images to look skewed when auto-sizes are enabled.

Props maciejmackowiak, sainathpoojary, mukesh27, joemcgill.
Fixes #62597.

[joemcgill]

Reopening for consideration for 6.7.2.

Merged in https://core.trac.wordpress.org/changeset/59773.

[jorbin]

[59773] looks good for backport to 6.7 branch

[joemcgill]

In 59778:

Post Thumbnails: Fix squashed featured image in wp-admin.

This updates the CSS for featured images in the classic editor that caused images to look skewed when auto-sizes are enabled.

Reviewed by jorbin.
Merges [59773] to the 6.7 branch.

Props maciejmackowiak, sainathpoojary, mukesh27, joemcgill.
Fixes #62597.