Bug 231360 - Overflow hidden with border radius not applied correctly for animated pseudo element
Summary: Overflow hidden with border radius not applied correctly for animated pseudo ...
Status: RESOLVED CONFIGURATION CHANGED
Alias: None
Product: WebKit
Classification: Unclassified
Component: Animations (show other bugs)
Version: Safari 15
Hardware: Mac (Apple Silicon) macOS 11
: P2 Normal
Assignee: Nobody
URL:
Keywords: BrowserCompat, InRadar
Depends on:
Blocks:
 
Reported: 2021-10-07 06:49 PDT by moritz.mt99
Modified: 2023-03-09 10:59 PST (History)
7 users (show)

See Also:

Attachments
Add an attachment (proposed patch, testcase, etc.)

Note You need to log in before you can comment on or make changes to this bug.
Description moritz.mt99 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)
Comment 1 Radar WebKit Bug Importer 2021-10-11 10:43:18 PDT 
<rdar://problem/84106074>
Comment 2 Antoine Quint 2022-02-01 02:58:10 PST 
I expect this is a compositing bug with clipping. Simon, could you take a look?
Comment 3 Simon Fraser (smfr) 2022-02-01 09:45:13 PST 
Probably bug 140535.
Comment 4 Ahmad Saleem 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!
Comment 5 Simon Fraser (smfr) 2023-03-09 10:59:25 PST 
Yeah, fixed with the border-radius/composited layer fix a while back.