Bug 279148

Summary: Animation jumps and snaps back when animating div in dialog
Product: WebKit Reporter: makinc
Component: AnimationsAssignee: Nobody <webkit-unassigned>
Status: NEW    
Severity: Normal CC: graouts, rajsite, webkit-bug-importer
Priority: P2 Keywords: InRadar
Version: Safari 15   
Hardware: Unspecified   
OS: Unspecified   
Attachments:
Description Flags
Screen capture of linked codepen example (using Windows WebKit build) none

makinc
Reported 2024-09-04 15:02:01 PDT
We implemented a "drawer" using a dialog element that, when sliding in from the right edge of the screen, initially "jumps" left before continuing to slide in. It then jumps back to the right to correct for the initial jump. Steps to Reproduce: See the following codepen: https://codepen.io/m-akinc/pen/PorBvaY Clicking the "Open" button will cause the div to slide in from the right. On Safari, it exhibits the buggy jump/snap-back I described above. It behaves properly in Chrome and Firefox. Workaround: If you check the "Start animation from 95% translation" checkbox, the keyframes used will start with a 95% translation (rather than 100%), so that the div is never fully off-screen. This somehow avoids the bug.
Attachments
Screen capture of linked codepen example (using Windows WebKit build) (323.84 KB, image/gif)
2024-09-05 10:57 PDT, makinc 		no flags
Details
View All Add attachment proposed patch, testcase, etc.
makinc
Comment 1 2024-09-05 10:57:55 PDT
Created attachment 472469 [details] Screen capture of linked codepen example (using Windows WebKit build)
Radar WebKit Bug Importer
Comment 2 2024-09-11 15:02:32 PDT
<rdar://problem/135829321>
Note You need to log in before you can comment on or make changes to this bug.