Bug 231360
| Summary: | Overflow hidden with border radius not applied correctly for animated pseudo element | ||
|---|---|---|---|
| Product: | WebKit | Reporter: | moritz.mt99 |
| Component: | Animations | Assignee: | Nobody <webkit-unassigned> |
| Status: | RESOLVED CONFIGURATION CHANGED | ||
| Severity: | Normal | CC: | ahmad.saleem792, dino, graouts, graouts, simon.fraser, webkit-bug-importer, zalan |
| Priority: | P2 | Keywords: | BrowserCompat, InRadar |
| Version: | Safari 15 | ||
| Hardware: | Mac (Apple Silicon) | ||
| OS: | macOS 11 | ||
| See Also: | https://bugs.webkit.org/show_bug.cgi?id=140535 | ||
moritz.mt99
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
<rdar://problem/84106074>
Antoine Quint
I expect this is a compositing bug with clipping. Simon, could you take a look?
Simon Fraser (smfr)
Probably bug 140535.
Ahmad Saleem
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)
Yeah, fixed with the border-radius/composited layer fix a while back.