Bug 247546
| Summary: | element.animate on pseudoElement can overflow border-radius | ||
|---|---|---|---|
| Product: | WebKit | Reporter: | sorvell |
| Component: | Animations | Assignee: | Nobody <webkit-unassigned> |
| Status: | RESOLVED CONFIGURATION CHANGED | ||
| Severity: | Normal | CC: | dino, graouts, simon.fraser |
| Priority: | P2 | ||
| Version: | Safari 16 | ||
| Hardware: | Unspecified | ||
| OS: | macOS 13 | ||
sorvell
When `element.animate` is called with a `pseudoElement` target (e.g. `::after`) and the pseudo element is transformed (e.g. via `scale`) to be larger than the containing element's dimensions and the element has `overflow: hidden` with a `border-radius` set, the psuedo-element incorrectly overflows the element's border-radius during the animation. Note, this behavior does not occur on Chrome or Firefox.
REPRODUCTION: https://lit.dev/playground/#gist=c313d05987201bea072e2d5f6381a67e.
WORKAROUND: Applying an explicit `transform: scale(1)` to the containing element fixes the issue.
| Attachments | ||
|---|---|---|
| Add attachment proposed patch, testcase, etc. |
Simon Fraser (smfr)
Does this still reproduce in Safari Tech Preview?
sorvell
Does not reproduce on Safari Tech Preview. Looks like it's fixed.
Simon Fraser (smfr)
Thanks for checking.