Cover: Border Radius not working with latest Chrome 122.X version and Aspect Ratio support

[luminuu]

Description

A client has reported an issue with border radius on Cover blocks. He set a border radius of 12px in the Global Styles for the Cover block, but the radius isn't applied to the images. On investigating this issue I found out that there has been a recent change in the latest Chrome version 122.X, which actually fixes a bug in the behaviour between overflow: clip and border-radius: https://chromium.googlesource.com/chromium/src/+/7e006a047e267eb0eefdbd93f11c915590c615cc - also check out the link to the CSSWG draft with a full explanation of the desired behaviour.

Recently, there has been a change to the Cover block adding support for Aspect Ratio in this PR: #56897
Specifically, for the block CSS, the overflow: clip property has changed to overflow-x: clip in order to support the aspect ratio settings to work properly.

Unfortunately, this causes the border-radius setting to be ignored, as the CSSWG draft says this:

3.1.2. Interaction of border-radius and overflow
As mentioned in CSS Backgrounds 3 § 4.3 Corner Clipping, the clipping region established by overflow can be rounded:

• When overflow-x and overflow-y compute to hidden, scroll, or auto, the clipping region is rounded based on the border radius, adjusted to the padding edge, as described in CSS Backgrounds 3 § 4.2 Corner Shaping.

• When both overflow-x and overflow-y compute to clip, the clipping region is rounded as described in § 3.2 Expanding Clipping Bounds: the overflow-clip-margin property.

• However, when one of overflow-x or overflow-y computes to clip and the other computes to visible, the clipping region is not rounded.

The last sentence is the important one - if just overflow-x is set to clip, the border-radius won't apply. Reverting back to overflow: clip solves this issue, but I guess this will cause issues with the aspect ratio setting again. As Chrome is the browser with the largest user base, I think it should be discussed how to fix this problem, as both settings (border radius and aspect ratio) are now available in the Gutenberg plugin and potentially 6.5.

Step-by-step reproduction instructions

1. Make sure your Chrome browser is updated to version 122.X - 121.X does not have this issue
2. Gutenberg 17.7 or at least 17.6 should be active as well
3. Open a post/page and add a Cover block, add a visible border radius like 20px to it. It should not apply visually.
4. Save the post/page
5. Open the site editor, navigate to Styles -> Blocks -> Cover
6. Scroll down to the Advanced Settings and add overflow: clip; as additional CSS
7. The border radius should now be working.

Screenshots, screen recording, code snippet

No response

Environment info

• WordPress 6.4.3
• Gutenberg 17.7.0
• Chrome 122.0.6261.69
• macOS Sonoma 14.2.1

Please confirm that you have searched existing issues in the repo.

Yes

Please confirm that you have tested with all plugins deactivated except Gutenberg.

Yes

[luminuu]

Pinging @andrewserong as you worked on the Aspect Ratio issue.

[andrewserong]

Thank you so much for the detailed write-up @luminuu! I didn't realise the way we'd implemented Aspect Ratio depended on a bug in Chrome, that's very interesting. I might need to give this one a bit of thought to figure out the best path forward.

Very happy for any ideas if anything springs to mind for anyone!

[andrewserong]

Potential fix in #59388