Cover: Border Radius not working with latest Chrome 122.X version and Aspect Ratio support #59366
Labels
[Block] Cover
Affects the Cover Block - used to display content laid over a background image
Browser Issues
Issues or PRs that are related to browser specific problems
[Status] In Progress
Tracking issues with work in progress
[Type] Bug
An existing feature does not function as intended
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
andborder-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 tooverflow-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:The last sentence is the important one - if just
overflow-x
is set toclip
, theborder-radius
won't apply. Reverting back tooverflow: 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
overflow: clip;
as additional CSSScreenshots, screen recording, code snippet
No response
Environment info
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
The text was updated successfully, but these errors were encountered: