RESOLVED DUPLICATE of bug 276727 296925
Modal <dialog> with CSS transition updated offsetParent too early causing unexpected behaviour
https://bugs.webkit.org/show_bug.cgi?id=296925
Summary Modal <dialog> with CSS transition updated offsetParent too early causing une...
Adrian
Reported 2025-08-05 03:22:12 PDT
Created attachment 476284 [details] Small example with a simple dialog and a "forever" close animation to showcase the issue Hi! I have a dialog that is show as a modal with CSS transition to do some animations when its open and closed. When we open it the dialog is shown at the center of the viewport, as we set its position with top/left + translate, and the open animation works as expected. When I close it the animation triggers fine but the dialog suddenly changes its position and goes from being at the center of the viewport to be at the center of the parent element with relative position. Looking at the details of the dialog it seems that its "offsetParent" is updated as soon as the dialog closes cause the unexpected movement. Testing the same in Chrome does not move the dialog, its stays at the center, and the "offsetParent" stays "null" until the transition ends. Unfortunately Firefox doesn't support transitions in dialog yet. So I'm not sure what the spec says regarding this but from a developer point of view it seems sensible to keep the "offsetParent" pinned, otherwise closing transitions can easily introduce unwanted behaviours like this dialog moving around. I attached a file that showcases this issue, let me know if you need anything else.
Attachments
Small example with a simple dialog and a "forever" close animation to showcase the issue (2.14 KB, text/html)
2025-08-05 03:22 PDT, Adrian
no flags
Adrian
Comment 1 2025-08-05 05:18:28 PDT
To add to this the same issue happens with popover, as soon as you do `hidePopover()` the `offsetParent` gets updated and the element moves
Adrian
Comment 2 2025-08-05 05:24:37 PDT
(In reply to Adrian from comment #0) > Created attachment 476284 [details] > Small example with a simple dialog and a "forever" close animation to > showcase the issue > > Hi! > > I have a dialog that is show as a modal with CSS transition to do some > animations when its open and closed. > When we open it the dialog is shown at the center of the viewport, as we set > its position with top/left + translate, and the open animation works as > expected. > When I close it the animation triggers fine but the dialog suddenly changes > its position and goes from being at the center of the viewport to be at the > center of the parent element with relative position. > Looking at the details of the dialog it seems that its "offsetParent" is > updated as soon as the dialog closes cause the unexpected movement. > > Testing the same in Chrome does not move the dialog, its stays at the > center, and the "offsetParent" stays "null" until the transition ends. > > Unfortunately Firefox doesn't support transitions in dialog yet. > > So I'm not sure what the spec says regarding this but from a developer point > of view it seems sensible to keep the "offsetParent" pinned, otherwise > closing transitions can easily introduce unwanted behaviours like this > dialog moving around. > > I attached a file that showcases this issue, let me know if you need > anything else. I have no idea how to edit the original description but in Chrome is not that the dialog 'offsetParent' is updated at the end of the transition, its always null
Tim Nguyen (:ntim)
Comment 3 2025-08-05 11:53:05 PDT
*** This bug has been marked as a duplicate of bug 276727 ***
Note You need to log in before you can comment on or make changes to this bug.