RESOLVED CONFIGURATION CHANGED 231360
Overflow hidden with border radius not applied correctly for animated pseudo element 
https://bugs.webkit.org/show_bug.cgi?id=231360
Summary Overflow hidden with border radius not applied correctly for animated pseudo ...
moritz.mt99
Reported 2021-10-07 06:49:20 PDT
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)
Attachments
Add attachment proposed patch, testcase, etc.
Radar WebKit Bug Importer
Comment 1 2021-10-11 10:43:18 PDT
<rdar://problem/84106074>
Antoine Quint
Comment 2 2022-02-01 02:58:10 PST
I expect this is a compositing bug with clipping. Simon, could you take a look?
Simon Fraser (smfr)
Comment 3 2022-02-01 09:45:13 PST
Probably bug 140535.
Ahmad Saleem
Comment 4 2023-03-09 05:18:53 PST
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!
Simon Fraser (smfr)
Comment 5 2023-03-09 10:59:25 PST
Yeah, fixed with the border-radius/composited layer fix a while back.
Note You need to log in before you can comment on or make changes to this bug.