301461 2025-10-25 05:44:08 -0700 [css-transitions][css-anchor-position] transitioning an accelerated property to show a popover with anchor positioning yields two transitions, fails to transition again 2025-11-05 07:26:05 -0800 1 1 1 Unclassified WebKit New Bugs WebKit Nightly Build Unspecified Unspecified NEW https://bugs.webkit.org/show_bug.cgi?id=301510 InRadar P2 Normal --- 301070 1 graouts kiet.ho jamesnw kiet.ho koivisto webkit-bug-importer oldest_to_newest 2154233 0 477196 graouts 2025-10-25 05:44:08 -0700 Created attachment 477196 Testcase This is a bug for one of the issues shown in bug 301070, or perhaps it'll be a duplicate, but there's something fishy going on when using a CSS Transition to show a popover when anchor positioning is involved. The attached test case does the following: ====================== <style> [popover] { transition: opacity 1s ease-in-out; position-try: flip-inline; &:popover-open { display: block; opacity: 1; } @starting-style { &:popover-open { opacity: 0; } } } </style> <button type="button" popovertarget="popover">Show popover</button> <div id="popover" popover> <p>Popover</p> </div> ====================== Clicking the "Show popover" visually has the right behavior but as it turns out the `opacity` transitions run twice, a second transition starting once the first, expected, transition completes. Another issue is that after dismissing the popover, the transition will not run again. 2154235 1 graouts 2025-10-25 05:45:24 -0700 Using another accelerated property, such as `translate`, reproduces the issue. Using a non-accelerated property, such as `margin-left`, does not reproduce the issue. 2154250 2 graouts 2025-10-25 10:39:14 -0700 The reason it does not look like a second transition is running is because it's transitioning from `0.999571919` to `1`. I'm not sure yet why it's picking `0.999571919`, which is clearly an animated value and which should not be considered as a value for considering a transition, over the underlying value, which should be 1. 2154253 3 graouts 2025-10-25 10:52:48 -0700 We get `oldStyle` in `Style::TreeResolver::createAnimatedElementUpdate()` by calling `resolveStartingStyle()` when the first transition is created. When the second is created, we get it by calling `beforeResolutionStyle()`. Somehow an animated value snuck into what is stored in `m_savedBeforeResolutionStylesForInterleaving`. 2154254 4 graouts 2025-10-25 11:02:17 -0700 I see that there's some code where `m_savedBeforeResolutionStylesForInterleaving` is populated which is specific to when anchor positioning is involved in `Style::: // Ensure that style resolution visits any unresolved anchor-positioned elements. if (elementAndState.value->stage < AnchorPositionResolutionStage::Resolved) { const_cast<Element&>(*elementAndState.key.first).invalidateForResumingAnchorPositionedElementResolution(); m_needsInterleavedLayout = true; saveBeforeResolutionStyleForInterleaving(*elementAndState.key.first); } I get a hunch that is something is wrong either in what we store in `m_savedBeforeResolutionStylesForInterleaving` or the circumstance under which we use it. 2154257 5 graouts 2025-10-25 11:09:41 -0700 Yes, logging indicates the `oldStyle` we get for the second transition is read from `m_savedBeforeResolutionStylesForInterleaving` and was stored in the function call above. Somehow we're resolving an animated style there, which is incorrect. 2154258 6 477199 graouts 2025-10-25 11:10:08 -0700 Created attachment 477199 Testcase 2154523 7 webkit-bug-importer 2025-10-27 14:17:16 -0700 <rdar://problem/163512045> 477196 2025-10-25 05:44:08 -0700 2025-10-25 11:10:08 -0700 Testcase anchor-popover-transition.html text/html 965 graouts PCEtLSBodHRwczovL2J1Z3Mud2Via2l0Lm9yZy9zaG93X2J1Zy5jZ2k/aWQ9MzAxMDcwIC0tPgo8 IS0tIGh0dHBzOi8vY29kZXBlbi5pby9iYWt1cmExMC9wZW4vR2dveVZFQiAtLT4KCjxzdHlsZT4K Cltwb3BvdmVyXSB7CiAgICAvKiBhbmltYXRpbmcgYG1hcmdpbi1sZWZ0YCBkb2VzIG5vdCByZXBy b2R1Y2UgdGhlIGlzc3VlLAogICAgICAgYW5pbWF0aW9uIGB0cmFuc2xhdGVgIGRvZXMgKi8KICAg IHRyYW5zaXRpb246IG9wYWNpdHkgMXMgZWFzZS1pbi1vdXQ7CgogICAgLyogZG9lcyBub3QgcmVw cm9kdWNlIHdpdGggdGhpcyBwcm9wZXJ0eSBjb21tZW50ZWQgb3V0ICovCiAgICBwb3NpdGlvbi10 cnk6IGZsaXAtaW5saW5lOwoKICAgICY6cG9wb3Zlci1vcGVuIHsKICAgICAgICBkaXNwbGF5OiBi bG9jazsKICAgICAgICBvcGFjaXR5OiAxOwogICAgfQoKICAgIEBzdGFydGluZy1zdHlsZSB7CiAg ICAgICAgJjpwb3BvdmVyLW9wZW4gewogICAgICAgICAgICBvcGFjaXR5OiAwOwogICAgICAgIH0K ICAgIH0KfQo8L3N0eWxlPgoKPGJ1dHRvbiB0eXBlPSJidXR0b24iIHBvcG92ZXJ0YXJnZXQ9InBv cG92ZXIiPlNob3cgcG9wb3ZlcjwvYnV0dG9uPgoKPGRpdiBpZD0icG9wb3ZlciIgcG9wb3Zlcj4K ICAgIDxwPlBvcG92ZXI8L3A+CjwvZGl2PgoKPGRpdiBpZD0ibG9nIj48L2Rpdj4KCjxzY3JpcHQ+ Cgpjb25zdCBkdW1wRXZlbnQgPSBldmVudCA9PiBsb2cuaW5zZXJ0QWRqYWNlbnRIVE1MKCJiZWZv cmVlbmQiLCBgPHA+PGNvZGU+JHtldmVudC50eXBlfTwvY29kZT4gZm9yIDxjb2RlPiR7ZXZlbnQu cHJvcGVydHlOYW1lfTwvY29kZT48L3A+YCk7CmZvciAoZXZlbnRUeXBlIG9mIFsndHJhbnNpdGlv bnN0YXJ0JywgJ3RyYW5zaXRpb25lbmQnLCAndHJhbnNpdGlvbmNhbmNlbCddKQogICAgcG9wb3Zl ci5hZGRFdmVudExpc3RlbmVyKGV2ZW50VHlwZSwgZHVtcEV2ZW50KTsKCjwvc2NyaXB0Pgo= 477199 2025-10-25 11:10:08 -0700 2025-10-25 11:10:08 -0700 Testcase anchor-popover-transition.html text/html 1063 graouts PHN0eWxlPgoKW3BvcG92ZXJdIHsKICAgIC8qIGFuaW1hdGluZyBgbWFyZ2luLWxlZnRgIGRvZXMg bm90IHJlcHJvZHVjZSB0aGUgaXNzdWUsCiAgICAgICBhbmltYXRpb24gYHRyYW5zbGF0ZWAgZG9l cyAqLwogICAgdHJhbnNpdGlvbjogb3BhY2l0eSAxcyBlYXNlLWluLW91dDsKCiAgICAvKiBkb2Vz IG5vdCByZXByb2R1Y2Ugd2l0aCB0aGlzIHByb3BlcnR5IGNvbW1lbnRlZCBvdXQgKi8KICAgIHBv c2l0aW9uLXRyeTogZmxpcC1pbmxpbmU7CgogICAgJjpwb3BvdmVyLW9wZW4gewogICAgICAgIGRp c3BsYXk6IGJsb2NrOwogICAgICAgIG9wYWNpdHk6IDE7CiAgICB9CgogICAgQHN0YXJ0aW5nLXN0 eWxlIHsKICAgICAgICAmOnBvcG92ZXItb3BlbiB7CiAgICAgICAgICAgIG9wYWNpdHk6IDA7CiAg ICAgICAgfQogICAgfQp9Cjwvc3R5bGU+Cgo8YnV0dG9uIHR5cGU9ImJ1dHRvbiIgcG9wb3ZlcnRh cmdldD0icG9wb3ZlciI+U2hvdyBwb3BvdmVyPC9idXR0b24+Cgo8ZGl2IGlkPSJwb3BvdmVyIiBw b3BvdmVyPgogICAgPHA+UG9wb3ZlcjwvcD4KPC9kaXY+Cgo8ZGl2IGlkPSJsb2ciPjwvZGl2PgoK PHNjcmlwdD4KCmNvbnN0IGR1bXBFdmVudCA9IGV2ZW50ID0+IHsKICAgIGNvbnN0IGFuaW1hdGlv bnMgPSBldmVudC5jdXJyZW50VGFyZ2V0LmdldEFuaW1hdGlvbnMoKTsKICAgIGNvbnN0IGtleWZy YW1lcyA9IGFuaW1hdGlvbnNbMF0uZWZmZWN0LmdldEtleWZyYW1lcygpOwogICAgY29uc3QgcHJv cGVydHkgPSBldmVudC5wcm9wZXJ0eU5hbWU7CiAgICBjb25zdCBmcm9tID0ga2V5ZnJhbWVzWzBd W3Byb3BlcnR5XTsKICAgIGNvbnN0IHRvID0ga2V5ZnJhbWVzWzFdW3Byb3BlcnR5XTsKICAgIGxv Zy5pbnNlcnRBZGphY2VudEhUTUwoImJlZm9yZWVuZCIsIGA8cD5TdGFydGVkIDxjb2RlPiR7cHJv cGVydHl9PC9jb2RlPiB0cmFuc2l0aW9uIGZyb20gPGNvZGU+JHtmcm9tfTwvY29kZT4gdG8gPGNv ZGU+JHt0b308L2NvZGU+PC9wPmApOwp9OwoKcG9wb3Zlci5hZGRFdmVudExpc3RlbmVyKCd0cmFu c2l0aW9uc3RhcnQnLCBkdW1wRXZlbnQpOwoKPC9zY3JpcHQ+Cg==