WebKit Bugzilla
New
Browse
Log In
×
Sign in with GitHub
or
Remember my login
Create Account
·
Forgot Password
Forgotten password account recovery
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
Details
View All
Add attachment
proposed patch, testcase, etc.
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.
Top of Page
Format For Printing
XML
Clone This Bug