Clipping with border-radius is not applied when there is a css transform and it is in a scrollable container

• Component: Compositing
• Status: RESOLVED DUPLICATE

[Brendan Donovan]

Created attachment 423717 [details]
Reproduction of the bug

Overview:
Clipping using overflow: hidden and a border-radius stops working if a css transform (e.g. transform: scale(1)) is also applied AND it is in a scrollable container.

Demo:
https://codepen.io/brendandonovan/pen/gOLJgyx

Steps to reproduce:
1. Open the above link
2. Observe the second div in the scrollable container

Actual Behaviour:
When a div with overflow:hidden and a border radius has also has transform: scale(1) and is within a scrollable container it stops clipping the inner content.

Expected behaviour:
A div with overflow:hidden and a border-radius should continue to clip the inner content when it has a css transform applied and it is within a scrollable container.

Build Date & Hardware: Date and hardware of the build in which you first encountered the bug.
Safari Version 14.0.3 (16610.4.3.1.7), macOS Big Sur 11.2.3 (20D91)

Additional Builds and Platforms:
Works as intended in Chrome.

[Simon Fraser (smfr)]

I think this is a dup of bug 216978.

[Brendan Donovan]

Sorry, I was thrown off by the hover state in the description and did not notice the overflow condition in bug [216978](https://bugs.webkit.org/show_bug.cgi?id=216978). This is a duplicate.

*** This bug has been marked as a duplicate of bug 216978 ***