296925 2025-08-05 03:22:12 -0700 Modal <dialog> with CSS transition updated offsetParent too early causing unexpected behaviour 2025-08-05 11:53:05 -0700 1 1 1 Unclassified WebKit New Bugs Safari 18 All All RESOLVED DUPLICATE 276727 P2 Normal --- 1 kileras webkit-unassigned ntim oldest_to_newest 2134369 0 476284 kileras 2025-08-05 03:22:12 -0700 Created attachment 476284 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. 2134380 1 kileras 2025-08-05 05:18:28 -0700 To add to this the same issue happens with popover, as soon as you do `hidePopover()` the `offsetParent` gets updated and the element moves 2134381 2 kileras 2025-08-05 05:24:37 -0700 (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 2134457 3 ntim 2025-08-05 11:53:05 -0700 *** This bug has been marked as a duplicate of bug 276727 *** 476284 2025-08-05 03:22:12 -0700 2025-08-05 03:22:12 -0700 Small example with a simple dialog and a "forever" close animation to showcase the issue dialog.animation.issue.html text/html 2188 kileras PGh0bWw+CiAgPGhlYWQ+CiAgICA8c3R5bGU+CiAgICAqIHsKICAgICAgZm9udC1mYW1pbHk6IC1h cHBsZS1zeXN0ZW0sIEJsaW5rTWFjU3lzdGVtRm9udCwgIlNlZ29lIFVJIiwgUm9ib3RvLCBIZWx2 ZXRpY2EsIEFyaWFsLCBzYW5zLXNlcmlmLCAiQXBwbGUgQ29sb3IgRW1vamkiLCAiU2Vnb2UgVUkg RW1vamkiLCAiU2Vnb2UgVUkgU3ltYm9sIjsKICAgIH0KCiAgICAucGFyZW50IHsKICAgICAgYWxp Z24taXRlbXM6IGNlbnRlcjsKICAgICAgZGlzcGxheTogZmxleDsKICAgICAgaGVpZ2h0OiAyMDBw eDsKICAgICAganVzdGlmeS1jb250ZW50OiBjZW50ZXI7CiAgICAgIG1hcmdpbjogMCBhdXRvOwog ICAgICBvdXRsaW5lOiAycHggc29saWQgYmx1ZTsKICAgICAgcG9zaXRpb246IHJlbGF0aXZlOwog ICAgICB3aWR0aDogMjAwcHg7CiAgICB9CgogICAgZGlhbG9nIHsKICAgICAgbGVmdDogNTAlOwog ICAgICBtYXJnaW46IDA7CiAgICAgIG91dGxpbmU6IDJweCBzb2xpZCByZWQ7CiAgICAgIHBvc2l0 aW9uOiBhYnNvbHV0ZTsKICAgICAgdG9wOiA1MCU7CiAgICAgIHRyYW5zbGF0ZTogLTUwJSAtNTAl OwogICAgICB0cmFuc2l0aW9uLXByb3BlcnR5OiBvcGFjaXR5LCBvdmVybGF5LCBkaXNwbGF5Owog ICAgICB0cmFuc2l0aW9uLWR1cmF0aW9uOiA5OTk5OTk5bXM7CiAgICAgIHRyYW5zaXRpb24tdGlt aW5nLWZ1bmN0aW9uOiBlYXNlLW91dDsKICAgICAgdHJhbnNpdGlvbi1iZWhhdmlvcjogYWxsb3ct ZGlzY3JldGU7CiAgICAgIG9wYWNpdHk6IDA7CgogICAgICAmOjpiYWNrZHJvcCB7CiAgICAgICAg dHJhbnNpdGlvbjogb3BhY2l0eSAyMDBtcyBlYXNlLW91dDsKICAgICAgICBvcGFjaXR5OiAwOwog ICAgICB9CgogICAgICAmW29wZW5dIHsKICAgICAgICB0cmFuc2l0aW9uLWR1cmF0aW9uOiAyMDBt czsKICAgICAgICBvcGFjaXR5OiAxOwoKICAgICAgICAmOjpiYWNrZHJvcCB7CiAgICAgICAgICBv cGFjaXR5OiAxOwogICAgICAgIH0KCiAgICAgICAgQHN0YXJ0aW5nLXN0eWxlIHsKICAgICAgICAg IG9wYWNpdHk6IDA7CgogICAgICAgICAgJjo6YmFja2Ryb3AgewogICAgICAgICAgICBvcGFjaXR5 OiAwOwogICAgICAgICAgfQogICAgICAgIH0KICAgICAgfQogICAgfQogICAgPC9zdHlsZT4KICA8 L2hlYWQ+CiAgPGJvZHk+CiAgICA8cD4KICAgICAgT24gPGI+U2FmYXJpPC9iPiBhcyBzb29uIGFz IHdlIGNsb3NlIHRoZSAiZGlhbG9nIiB0aGUgIm9mZnNldFBhcmVudCIgaXMgcmVzdG9yZWQgYW5k IHNpbmNlIGl0IGhhcyBhIHJlbGF0aXZlCiAgICAgIHBvc2l0aW9uIHRoZSAiZGlhbG9nIiBtb3Zl cyBicmVha2luZyB0aGUgdHJhbnNpdGlvbi4KICAgIDwvcD4KCiAgICA8cD4KICAgICAgT24gPGI+ Q2hyb21lPC9iPiBhZnRlciBjbGlja2luZyB0aGUgY2xvc2UgYnV0dG9uIHRoZSAiZGlhbG9nIiBz dGF5cyBjZW50ZXIgaW4gdGhlIHNjcmVlbiBhcyBpdHMgIm9mZnNldFBhcmVudCIgaXMKICAgICAg bm90IHVwZGF0ZWQgd2hpbGUgaXRzIGRvaW5nIGl0cyB0cmFuc2l0aW9uIHRvIGNsb3NlZCBzdGF0 ZQogICAgPC9wPgoKICAgIDxwPgogICAgICBPbiA8Yj5GaXJlZm94PC9iPiB3ZSBkb24ndCBoYXZl IHRyYW5zaXRpb25zIGZvciBkaWFsb2dzLgogICAgPC9wPgoKCiAgICA8ZGl2IGNsYXNzPSJwYXJl bnQiPgogICAgICA8YnV0dG9uPk9wZW48L2J1dHRvbj4KCiAgICAgIDxkaWFsb2cgaWQ9ImRpYWxv ZyI+CiAgICAgICAgPGZvcm0gbWV0aG9kPSJkaWFsb2ciPgogICAgICAgICAgPGJ1dHRvbj5DbG9z ZTwvYnV0dG9uPgogICAgICAgIDwvZm9ybT4KICAgICAgPC9kaWFsb2c+CiAgICA8ZGl2PgoKICAg IDxzY3JpcHQ+CiAgICAgIGNvbnN0IGJ1dHRvbiA9IGRvY3VtZW50LnF1ZXJ5U2VsZWN0b3IoJ2J1 dHRvbicpOwogICAgICBjb25zdCBkaWFsb2cgPSBkb2N1bWVudC5xdWVyeVNlbGVjdG9yKCdkaWFs b2cnKTsKCiAgICAgIGJ1dHRvbi5vbmNsaWNrID0gKCkgPT4gewogICAgICAgIGRpYWxvZy5zaG93 TW9kYWwoKTsKICAgICAgfQoKICAgICAgZGlhbG9nLm9uY2xvc2UgPSAoKSA9PiB7CiAgICAgICAg Y29uc29sZS5hc3NlcnQoIWRpYWxvZy5vZmZzZXRQYXJlbnQsICdEaWFsb2cgb2Zmc2V0IHBhcmVu dCBoYXMgY2hhbmdlZCBiZWZvcmUgInRyYW5zaXRpb25lbmQiJykKICAgICAgfQogICAgPC9zY3Jp cHQ+CiAgPC9ib2R5Pgo8L2h0bWw+Cg==