Bug 244337

Summary: border-radius changes during CSS transition with opacity change
Product: WebKit Reporter: Jon Lee <jonlee>
Component: AnimationsAssignee: Nobody <webkit-unassigned>
Status: RESOLVED CONFIGURATION CHANGED    
Severity: Normal CC: ahmad.saleem792, dino, graouts, jonlee554, karlcow, simon.fraser, webkit-bug-importer
Priority: P2 Keywords: BrowserCompat, InRadar, NeedsReduction
Version: WebKit Nightly Build   
Hardware: Unspecified   
OS: Unspecified   
URL: https://mattfarley.ca
See Also: https://bugs.webkit.org/show_bug.cgi?id=140535
Attachments:
Description Flags
test case showing the glitch in the transition none

Description Jon Lee 2022-08-25 09:55:53 PDT 
On STP 152

Load https://mattfarley.ca

Scroll to "My Recent Work" section

Hover over cards

The corners toggle between rounded and square corners during the animation. This does not happen in Chrome or Firefox.
Comment 1 Alexey Proskuryakov 2022-08-26 18:21:56 PDT 
Same behavior with built-in Safari on macOS 12.5.1
Comment 2 Karl Dubost 2022-08-28 20:08:50 PDT 
Created attachment 461959 [details]
test case showing the glitch in the transition

Confirmed. Here a reduced test case.
Comment 3 Karl Dubost 2022-08-28 20:10:31 PDT 
Both Gecko and Blink make the transition without resetting the border-radius.
WebKit seems to reset the border-radius at the beginning of the transition, then reapply the border-radius.
Comment 4 Radar WebKit Bug Importer 2022-08-28 20:10:41 PDT 
<rdar://problem/99259440>
Comment 5 Simon Fraser (smfr) 2022-08-28 20:45:40 PDT 
I think this is bug 140535.
Comment 6 Ahmad Saleem 2023-01-14 16:03:40 PST 
I am unable to reproduce this bug in Safari Technology Preview 161 while it is reproducible in Safari 16.2.

Marking this as "RESOLVED CONFIGURATION CHANGED". Please reopen, if it is still reproducible. Thanks!
Comment 7 Jon Lee 2023-01-15 12:35:44 PST 
Confirmed it doesn't repro in STP 161.