300385 2025-10-08 03:54:53 -0700 CSS transitions in the Shadow DOM are interrupted when the slotted content is replaced 2026-01-12 09:01:51 -0800 1 1 1 Unclassified WebKit Animations Safari 18 All All NEW InRadar P2 Normal --- 148695 1 artasend webkit-unassigned graouts koivisto rniwa webkit-bug-importer oldest_to_newest 2149422 0 477026 artasend 2025-10-08 03:54:53 -0700 Created attachment 477026 Native example of the described issue CSS transitions within the Shadow DOM are interrupted and reset unexpectedly when the content (Light DOM children) is replaced, but they work correctly in Firefox and Chrome. ## Steps to Reproduce: - Create a Web Component with Shadow DOM containing an element with CSS transition - Include a <slot> element in the Shadow DOM template - Place content in the slot from Light DOM - Simultaneously trigger: - A property change that starts a CSS transition on an element in Shadow DOM - A replacement of the slotted content (not just property updates, but full node replacement) ## Expected Result: The CSS transition in Shadow DOM should complete normally, independent of changes to slotted content. ## Actual Result: The CSS transition is interrupted and the element immediately jumps to the end state without animation. ## Environment: I have tested this on a few devices and the issue always occurs: ### Device 1 Safari Version: 18.0 (19619.1.26.111.10, 19619) macOS Version: 14.6.1 (23G93) ### Device 2 (Emulator) iPhone 15 Pro, iOS 17.5 ## Technical Notes: - The issue occurs specifically when slotted content nodes are replaced (e.g., replaceChild()) - Simple property updates to slotted content don't trigger the issue ## Real world impact This bug has severe implications for web applications using component-based page layouts. A common pattern is: ```html <main-layout> #shadow-root <main-menu activeItem="..."></main-menu> <slot></slot> <my-page> </main-layout> ``` When users navigate between pages, the <my-page> component in the slot is replaced, which breaks ALL animations in the main menu (highlighting active items, hover effects, transitions, etc.). ## Attachments - [Live demo using Lit framework](https://lit.dev/playground/#project=W3sibmFtZSI6ImFuaW1hdGlvbi1kZW1vLnRzIiwiY29udGVudCI6ImltcG9ydCB7aHRtbCwgY3NzLCBMaXRFbGVtZW50fSBmcm9tICdsaXQnO1xuaW1wb3J0IHtjdXN0b21FbGVtZW50LCBzdGF0ZX0gZnJvbSAnbGl0L2RlY29yYXRvcnMuanMnO1xuaW1wb3J0IHtjYWNoZX0gZnJvbSAnbGl0L2RpcmVjdGl2ZXMvY2FjaGUuanMnO1xuaW1wb3J0ICcuL3Nsb3QtZGVtby5qcyc7XG5cbkBjdXN0b21FbGVtZW50KCdhbmltYXRpb24tZGVtbycpXG5leHBvcnQgY2xhc3MgQW5pbWF0aW9uRGVtbyBleHRlbmRzIExpdEVsZW1lbnQge1xuICBzdGF0aWMgc3R5bGVzID0gY3NzYFxuICAgIGRpdiB7XG4gICAgICB3aWR0aDogMjAwcHg7XG4gICAgICBoZWlnaHQ6IDIwMHB4O1xuICAgIH1cbiAgYDtcblxuICBAc3RhdGUoKVxuICB0ZXN0ID0gZmFsc2U7XG5cbiAgcmVuZGVyKCkge1xuICAgIHJldHVybiBodG1sYFxuICAgICAgPGJ1dHRvbiBAY2xpY2s9JHt0aGlzLm9uQ2xpY2t9PkFuaW1hdGU8L2J1dHRvbj5cbiAgICAgIFxuICAgICAgPHNsb3QtZGVtbyA_dGVzdD0ke3RoaXMudGVzdH0-XG4gICAgICAgICR7dGhpcy50ZXN0ID9cbiAgICAgICAgICBodG1sYDxkaXYgc3R5bGU9XCJiYWNrZ3JvdW5kLWNvbG9yOiByZWRcIj48L2Rpdj5gIDpcbiAgICAgICAgICBodG1sYDxkaXYgc3R5bGU9XCJiYWNrZ3JvdW5kLWNvbG9yOiBibHVlXCI-PC9kaXY-YH1cbiAgICAgIDwvc2xvdC1kZW1vPmA7XG4gIH1cblxuICBvbkNsaWNrKCkge1xuICAgIHRoaXMudGVzdCA9ICF0aGlzLnRlc3Q7XG4gIH1cbn1cbiJ9LHsibmFtZSI6ImluZGV4Lmh0bWwiLCJjb250ZW50IjoiPCFET0NUWVBFIGh0bWw-XG48aGVhZD5cbiAgPHNjcmlwdCB0eXBlPVwibW9kdWxlXCIgc3JjPVwiLi9hbmltYXRpb24tZGVtby5qc1wiPjwvc2NyaXB0PlxuPC9oZWFkPlxuPGJvZHk-XG4gIDxhbmltYXRpb24tZGVtbz48L2FuaW1hdGlvbi1kZW1vPlxuPC9ib2R5PlxuIn0seyJuYW1lIjoicGFja2FnZS5qc29uIiwiY29udGVudCI6IntcbiAgXCJkZXBlbmRlbmNpZXNcIjoge1xuICAgIFwibGl0XCI6IFwiXjMuMC4wXCIsXG4gICAgXCJAbGl0L3JlYWN0aXZlLWVsZW1lbnRcIjogXCJeMi4wLjBcIixcbiAgICBcImxpdC1lbGVtZW50XCI6IFwiXjQuMC4wXCIsXG4gICAgXCJsaXQtaHRtbFwiOiBcIl4zLjAuMFwiXG4gIH1cbn0iLCJoaWRkZW4iOnRydWV9LHsibmFtZSI6InNsb3QtZGVtby50cyIsImNvbnRlbnQiOiJpbXBvcnQge2h0bWwsIGNzcywgTGl0RWxlbWVudH0gZnJvbSAnbGl0JztcbmltcG9ydCB7Y3VzdG9tRWxlbWVudCwgcHJvcGVydHl9IGZyb20gJ2xpdC9kZWNvcmF0b3JzLmpzJztcblxuQGN1c3RvbUVsZW1lbnQoJ3Nsb3QtZGVtbycpXG5leHBvcnQgY2xhc3MgU2xvdERlbW8gZXh0ZW5kcyBMaXRFbGVtZW50IHtcbiAgc3RhdGljIHN0eWxlcyA9IGNzc2BcbiAgICA6aG9zdCB7XG4gICAgICBkaXNwbGF5OiBibG9jaztcbiAgICB9XG4gIFxuICAgIHAge1xuICAgICAgY29sb3I6IGJsdWU7XG4gICAgICB0cmFuc2l0aW9uOiBjb2xvciAwLjVzIGVhc2UtaW4tb3V0O1xuICAgIH1cbiAgICBwLmFjdGl2ZSB7IGNvbG9yOiByZWQgfWA7XG5cbiAgQHByb3BlcnR5KHsgdHlwZTogQm9vbGVhbiB9KVxuICB0ZXN0ID0gZmFsc2U7XG5cbiAgcmVuZGVyKCkge1xuICAgIHJldHVybiBodG1sYFxuICAgICAgPHAgY2xhc3M9XCIke3RoaXMudGVzdCA_ICdhY3RpdmUnIDogJyd9XCI-SGVsbG8gV29ybGQhPC9wPlxuICAgICAgPHNsb3Q-PC9zbG90PlxuICAgIGA7XG4gIH1cbn1cbiJ9XQ) - Also, there is a native implementation (without any frameworks) in the attached HTML file. 2151206 1 webkit-bug-importer 2025-10-15 03:55:12 -0700 <rdar://problem/162672242> 2151301 2 graouts 2025-10-15 08:01:24 -0700 I feel like we already fixed similar bugs with interrupted animations on slotted content, but not specifically transitions. 2151588 3 artasend 2025-10-16 02:02:06 -0700 (In reply to Antoine Quint from comment #2) > I feel like we already fixed similar bugs with interrupted animations on > slotted content, but not specifically transitions. The problem is not with transitions on the slotted content itself, but about a Shadow DOM transitions being incorrectly interrupted by unrelated Light DOM changes. The slot content replacement shouldn't affect transitions on separate Shadow DOM elements. 477026 2025-10-08 03:54:53 -0700 2025-10-08 03:54:53 -0700 Native example of the described issue shadow-dom-animation-issue.html text/html 3284 artasend PCFkb2N0eXBlIGh0bWw+CjxodG1sIGxhbmc9ImVuIj4KICA8aGVhZD4KICAgIDxtZXRhIGNoYXJz ZXQ9IlVURi04IiAvPgogICAgPG1ldGEgbmFtZT0idmlld3BvcnQiIGNvbnRlbnQ9IndpZHRoPWRl dmljZS13aWR0aCwgaW5pdGlhbC1zY2FsZT0xLjAiIC8+CiAgICA8dGl0bGU+U2hhZG93IERPTSBB bmltYXRpb24gRGVtbyAtIFNsb3QgQ29udGVudCBSZXBsYWNlbWVudDwvdGl0bGU+CiAgPC9oZWFk PgogIDxib2R5PgogICAgPGFuaW1hdGlvbi1kZW1vPjwvYW5pbWF0aW9uLWRlbW8+CgogICAgPHNj cmlwdD4KICAgICAgY2xhc3MgU2xvdERlbW8gZXh0ZW5kcyBIVE1MRWxlbWVudCB7CiAgICAgICAg Y29uc3RydWN0b3IoKSB7CiAgICAgICAgICBzdXBlcigpOwogICAgICAgICAgdGhpcy5hdHRhY2hT aGFkb3coeyBtb2RlOiAib3BlbiIgfSk7CiAgICAgICAgICB0aGlzLl90ZXN0ID0gZmFsc2U7CiAg ICAgICAgICB0aGlzLl9wYXJhZ3JhcGggPSBudWxsOwogICAgICAgIH0KCiAgICAgICAgc3RhdGlj IGdldCBvYnNlcnZlZEF0dHJpYnV0ZXMoKSB7CiAgICAgICAgICByZXR1cm4gWyJ0ZXN0Il07CiAg ICAgICAgfQoKICAgICAgICBhdHRyaWJ1dGVDaGFuZ2VkQ2FsbGJhY2sobmFtZSwgb2xkVmFsdWUs IG5ld1ZhbHVlKSB7CiAgICAgICAgICBpZiAobmFtZSA9PT0gInRlc3QiKSB7CiAgICAgICAgICAg IGNvbnN0IG5ld1Rlc3QgPSBuZXdWYWx1ZSAhPT0gbnVsbDsKICAgICAgICAgICAgaWYgKHRoaXMu X3Rlc3QgIT09IG5ld1Rlc3QpIHsKICAgICAgICAgICAgICB0aGlzLl90ZXN0ID0gbmV3VGVzdDsK ICAgICAgICAgICAgICB0aGlzLnVwZGF0ZVBhcmFncmFwaCgpOwogICAgICAgICAgICB9CiAgICAg ICAgICB9CiAgICAgICAgfQoKICAgICAgICBjb25uZWN0ZWRDYWxsYmFjaygpIHsKICAgICAgICAg IHRoaXMuaW5pdGlhbGl6ZURPTSgpOwogICAgICAgIH0KCiAgICAgICAgaW5pdGlhbGl6ZURPTSgp IHsKICAgICAgICAgIHRoaXMuc2hhZG93Um9vdC5pbm5lckhUTUwgPSBgCiAgICAgICAgICAgIDxz dHlsZT4KICAgICAgICAgICAgICA6aG9zdCB7IGRpc3BsYXk6IGJsb2NrIH0KICAgICAgICAgICAg CiAgICAgICAgICAgICAgcCB7CiAgICAgICAgICAgICAgICBjb2xvcjogYmx1ZTsKICAgICAgICAg ICAgICAgIHRyYW5zaXRpb246IGNvbG9yIDAuNXMgZWFzZS1pbi1vdXQ7CiAgICAgICAgICAgICAg fQogICAgICAgICAgICAgIAogICAgICAgICAgICAgIHAuYWN0aXZlIHsgY29sb3I6IHJlZCB9CiAg ICAgICAgICAgIDwvc3R5bGU+CiAgICAgICAgICAgIDxwPkhlbGxvIFdvcmxkITwvcD4KICAgICAg ICAgICAgPHNsb3Q+PC9zbG90PgogICAgICAgICAgYDsKCiAgICAgICAgICB0aGlzLl9wYXJhZ3Jh cGggPSB0aGlzLnNoYWRvd1Jvb3QucXVlcnlTZWxlY3RvcigicCIpOwogICAgICAgICAgdGhpcy51 cGRhdGVQYXJhZ3JhcGgoKTsKICAgICAgICB9CgogICAgICAgIHVwZGF0ZVBhcmFncmFwaCgpIHsK ICAgICAgICAgIGlmICh0aGlzLl9wYXJhZ3JhcGgpIHsKICAgICAgICAgICAgaWYgKHRoaXMuX3Rl c3QpIHsKICAgICAgICAgICAgICB0aGlzLl9wYXJhZ3JhcGguY2xhc3NMaXN0LmFkZCgiYWN0aXZl Iik7CiAgICAgICAgICAgIH0gZWxzZSB7CiAgICAgICAgICAgICAgdGhpcy5fcGFyYWdyYXBoLmNs YXNzTGlzdC5yZW1vdmUoImFjdGl2ZSIpOwogICAgICAgICAgICB9CiAgICAgICAgICB9CiAgICAg ICAgfQogICAgICB9CgogICAgICBjbGFzcyBBbmltYXRpb25EZW1vIGV4dGVuZHMgSFRNTEVsZW1l bnQgewogICAgICAgIGNvbnN0cnVjdG9yKCkgewogICAgICAgICAgc3VwZXIoKTsKICAgICAgICAg IHRoaXMuYXR0YWNoU2hhZG93KHsgbW9kZTogIm9wZW4iIH0pOwogICAgICAgICAgdGhpcy5fdGVz dCA9IGZhbHNlOwogICAgICAgICAgdGhpcy5fc2xvdERlbW8gPSBudWxsOwogICAgICAgIH0KCiAg ICAgICAgY29ubmVjdGVkQ2FsbGJhY2soKSB7CiAgICAgICAgICB0aGlzLmluaXRpYWxpemVET00o KTsKICAgICAgICB9CgogICAgICAgIGluaXRpYWxpemVET00oKSB7CiAgICAgICAgICB0aGlzLnNo YWRvd1Jvb3QuaW5uZXJIVE1MID0gYAogICAgICAgICAgICA8c3R5bGU+CiAgICAgICAgICAgICAg ZGl2IHsKICAgICAgICAgICAgICAgIHdpZHRoOiAyMDBweDsKICAgICAgICAgICAgICAgIGhlaWdo dDogMjAwcHg7CiAgICAgICAgICAgIDwvc3R5bGU+CiAgICAgICAgICAgIDxidXR0b24gaWQ9ImFu aW1hdGVCdG4iPkFuaW1hdGU8L2J1dHRvbj4KICAgICAgICAgICAgCiAgICAgICAgICAgIDxzbG90 LWRlbW8gaWQ9InNsb3REZW1vIj4KICAgICAgICAgICAgICA8ZGl2IHN0eWxlPSJiYWNrZ3JvdW5k LWNvbG9yOiBibHVlIj48L2Rpdj4KICAgICAgICAgICAgPC9zbG90LWRlbW8+CiAgICAgICAgICBg OwoKICAgICAgICAgIHRoaXMuX3Nsb3REZW1vID0gdGhpcy5zaGFkb3dSb290LmdldEVsZW1lbnRC eUlkKCJzbG90RGVtbyIpOwogICAgICAgICAgY29uc3QgYnV0dG9uID0gdGhpcy5zaGFkb3dSb290 LmdldEVsZW1lbnRCeUlkKCJhbmltYXRlQnRuIik7CgogICAgICAgICAgYnV0dG9uLmFkZEV2ZW50 TGlzdGVuZXIoImNsaWNrIiwgKCkgPT4gewogICAgICAgICAgICB0aGlzLl90ZXN0ID0gIXRoaXMu X3Rlc3Q7CiAgICAgICAgICAgIHRoaXMudXBkYXRlU2xvdENvbnRlbnQoKTsKICAgICAgICAgIH0p OwogICAgICAgIH0KCiAgICAgICAgdXBkYXRlU2xvdENvbnRlbnQoKSB7CiAgICAgICAgICBpZiAo dGhpcy5fc2xvdERlbW8pIHsKICAgICAgICAgICAgdGhpcy5fc2xvdERlbW8udG9nZ2xlQXR0cmli dXRlKCJ0ZXN0IiwgdGhpcy5fdGVzdCk7CgogICAgICAgICAgICBjb25zdCBvbGREaXYgPSB0aGlz Ll9zbG90RGVtby5xdWVyeVNlbGVjdG9yKCJkaXYiKTsKCiAgICAgICAgICAgIGlmIChvbGREaXYp IHsKICAgICAgICAgICAgICBjb25zdCBuZXdEaXYgPSBvbGREaXYuY2xvbmVOb2RlKCk7CiAgICAg ICAgICAgICAgbmV3RGl2LnN0eWxlLmJhY2tncm91bmRDb2xvciA9IHRoaXMuX3Rlc3QgPyAicmVk IiA6ICJibHVlIjsKCiAgICAgICAgICAgICAgdGhpcy5fc2xvdERlbW8ucmVwbGFjZUNoaWxkKG5l d0Rpdiwgb2xkRGl2KTsKICAgICAgICAgICAgfQogICAgICAgICAgfQogICAgICAgIH0KICAgICAg fQoKICAgICAgY3VzdG9tRWxlbWVudHMuZGVmaW5lKCJzbG90LWRlbW8iLCBTbG90RGVtbyk7CiAg ICAgIGN1c3RvbUVsZW1lbnRzLmRlZmluZSgiYW5pbWF0aW9uLWRlbW8iLCBBbmltYXRpb25EZW1v KTsKICAgIDwvc2NyaXB0PgogIDwvYm9keT4KPC9odG1sPgo=