231360 2021-10-07 06:49:20 -0700 Overflow hidden with border radius not applied correctly for animated pseudo element 2023-03-09 10:59:25 -0800 1 1 1 Unclassified WebKit Animations Safari 15 Mac (Apple Silicon) macOS 11 RESOLVED CONFIGURATION CHANGED https://bugs.webkit.org/show_bug.cgi?id=140535 BrowserCompat, InRadar P2 Normal --- 1 moritz.mt99 webkit-unassigned ahmad.saleem792 dino graouts graouts simon.fraser webkit-bug-importer zalan oldest_to_newest 1801583 0 moritz.mt99 2021-10-07 06:49:20 -0700 When animating transform: translateX on a pseudo element, the element does not respect the parent overflow: hidden attribute. See this example: https://codesandbox.io/s/safari-css-overflow-hidden-pseudo-bug-19108?file=/index.html You can see that the "shine/pulse" effect on this progress bar, renders outside the parent element as well. The expected behavior would be for the overlapping content of the pseudo element at the border corners to be cut off. This example is working correctly in Chrome. Safari Version: Version 15.0 (16612.1.29.41.4, 16612) OS Version: macOS Big Sur 11.6 (20G165) Hardware: MacBook Pro (13-inch, M1, 2020) 1802691 1 webkit-bug-importer 2021-10-11 10:43:18 -0700 <rdar://problem/84106074> 1835884 2 graouts 2022-02-01 02:58:10 -0800 I expect this is a compositing bug with clipping. Simon, could you take a look? 1836027 3 simon.fraser 2022-02-01 09:45:13 -0800 Probably bug 140535. 1940034 4 ahmad.saleem792 2023-03-09 05:18:53 -0800 I am not able to reproduce this bug in Safari Technology Preview 165 and WebKit ToT (261422@main) and it does not cause on left side that the pulse is outside of parent container. Can someone else confirm and we can mark this as "RESOLVED CONFIGURATION CHANGED"? Thanks! 1940136 5 simon.fraser 2023-03-09 10:59:25 -0800 Yeah, fixed with the border-radius/composited layer fix a while back.