NEW 279148
Animation jumps and snaps back when animating div in dialog 
https://bugs.webkit.org/show_bug.cgi?id=279148
Summary Animation jumps and snaps back when animating div in dialog
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.