199404 2019-07-02 07:31:53 -0700 Transition of max size of block in container with position leaves positioned children with animation rendered in wrong position 2026-01-12 09:04:58 -0800 1 1 1 Unclassified WebKit Animations Safari 12 All All NEW InRadar P2 Major --- 1 timoka10+webkit-bugzilla webkit-unassigned ahmad.saleem792 dino graouts simon.fraser webkit-bug-importer zalan oldest_to_newest 1549553 0 373319 timoka10+webkit-bugzilla 2019-07-02 07:31:53 -0700 Created attachment 373319 Minimal non-working example This is a regression. It was not seen on Safari 11 or macOS Safari 12.0, but it is present on iOS Safari 12 and macOS Safari 12.1.1. When there is a combination of 1) an outer container with a position (relative, absolute), 2) multiple inner containers with transitioned max-height changes being resized simultaneously, and 3) children in these inner containers with a position and animation (animation does not need to change position) said children will be left rendered in the wrong position. This is a rendering issue, not a box model one, as e.g. the dev tools highlighting appears in the location expected for the child, and a re-render will move it to the correct position. Attached is a minimal non-working example. Clicking on the button “switch” will simultaneously set the initial (red) inner container to max-height: 0px and the replacing (green) inner container to max-height: 200px. The expected outcome, which can be seen on other browsers, is that in the end a child square is positioned where the initial child square first was. What happens instead is that the child square is left in the wrong position, mostly obscured. Removing the blinking opacity animation with the “Clear animations” button will re-render the child square in the correct position. 1549577 1 webkit-bug-importer 2019-07-02 08:48:40 -0700 <rdar://problem/52525498> 1910593 2 ahmad.saleem792 2022-11-05 17:47:37 -0700 I am able to reproduce this in Safari Technology Preview 158 and get blinking inner circle and also it leaves artefact on the bottom while Chrome Canary 109 works smoothly in the attached testcase. -> Click "Switch" after loading testcase to reproduce this issue. Thanks! 373319 2019-07-02 07:31:53 -0700 2019-07-02 07:31:53 -0700 Minimal non-working example transition-positions.xhtml application/xhtml+xml 1973 timoka10+webkit-bugzilla PCFET0NUWVBFIGh0bWw+Cgo8aHRtbCB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94aHRt bCIgbGFuZz0iZW4iIHhtbDpsYW5nPSJlbiI+CgogIDxoZWFkPgogICAgPHRpdGxlPkV4YW1wbGUg b2YgZWxlbWVudCBwb3NpdGlvbnMgb24gdHJhbnNpdGlvbnM8L3RpdGxlPgogICAgPHN0eWxlPgog ICAgICAvKjwhW0NEQVRBWyovCiAgICAgICNhYnNvbHV0ZS1wYXJlbnQgewogICAgICAgIHBvc2l0 aW9uOiBhYnNvbHV0ZTsKCXdpZHRoOiAzMDBweDsKICAgICAgfQoKICAgICAgLmFjY29yZGlvbi10 YWIgewogICAgICAgIG92ZXJmbG93OiBoaWRkZW47CiAgICAgICAgdHJhbnNpdGlvbjogbWF4LWhl aWdodCAwLjZzIGVhc2Utb3V0OwogICAgICB9CiAgICAgICNmaXJzdCB7CiAgICAgICAgbWF4LWhl aWdodDogMjAwcHg7CiAgICAgICAgYmFja2dyb3VuZC1jb2xvcjogcmVkOwogICAgICB9CiAgICAg ICNzZWNvbmQgewogICAgICAgIG1heC1oZWlnaHQ6IDBweDsKICAgICAgICBiYWNrZ3JvdW5kLWNv bG9yOiBncmVlbjsKICAgICAgfQoKICAgICAgLnRhYi1vdXRlci1jb250ZW50IHsKICAgICAgICBw b3NpdGlvbjogcmVsYXRpdmU7CiAgICAgICAgaGVpZ2h0OiAxMDBweDsKICAgICAgICB3aWR0aDog NTAlOwogICAgICB9CgogICAgICBAa2V5ZnJhbWVzIHB1bHNlIHsKICAgICAgICAwJSB7b3BhY2l0 eTogMC40O30KICAgICAgICA1MCUge29wYWNpdHk6IDAuNjU7fQogICAgICAgIDEwMCUge29wYWNp dHk6IDAuNDt9CiAgICAgIH0KICAgICAgLnNxdWFyZSB7CiAgICAgICAgd2lkdGg6IDI0cHg7CiAg ICAgICAgaGVpZ2h0OiAyNHB4OwogICAgICAgIHBvc2l0aW9uOiBhYnNvbHV0ZTsKICAgICAgICB0 b3A6IDBweDsKICAgICAgICByaWdodDogLTEycHg7CiAgICAgICAgYmFja2dyb3VuZC1jb2xvcjog d2hpdGU7CiAgICAgICAgYW5pbWF0aW9uOiBwdWxzZSAxLjVzIGluZmluaXRlOwogICAgICB9CiAg ICAgIC8qXV0+Ki8KICAgIDwvc3R5bGU+CiAgICA8c2NyaXB0PgogICAgICAvLzwhW0NEQVRBWwog ICAgICBmdW5jdGlvbiBvcGVuU2Vjb25kKCkgewogICAgICAgIGRvY3VtZW50LmdldEVsZW1lbnRC eUlkKCJmaXJzdCIpLnN0eWxlLmNzc1RleHQgPSAibWF4LWhlaWdodDogMHB4OyI7CiAgICAgICAg ZG9jdW1lbnQuZ2V0RWxlbWVudEJ5SWQoInNlY29uZCIpLnN0eWxlLmNzc1RleHQgPSAibWF4LWhl aWdodDogMjAwcHg7IjsKICAgICAgfQoKICAgICAgZnVuY3Rpb24gY2xlYXJBbmltYXRpb25zKCkg ewogICAgICAgIEFycmF5LnByb3RvdHlwZS5mb3JFYWNoLmNhbGwoZG9jdW1lbnQuZ2V0RWxlbWVu dHNCeUNsYXNzTmFtZSgic3F1YXJlIiksIGZ1bmN0aW9uKGVsZW0pIHsKICAgICAgICAgIGVsZW0u c3R5bGUuY3NzVGV4dCA9ICJhbmltYXRpb246IG5vbmU7IjsKICAgICAgICB9KTsKICAgICAgfQog ICAgICAvL11dPgogICAgPC9zY3JpcHQ+CiAgPC9oZWFkPgoKICA8Ym9keT4KICAgIDxidXR0b24g b25jbGljaz0ib3BlblNlY29uZCgpOyI+U3dpdGNoPC9idXR0b24+CiAgICA8YnV0dG9uIG9uY2xp Y2s9ImNsZWFyQW5pbWF0aW9ucygpOyI+Q2xlYXIgYW5pbWF0aW9uczwvYnV0dG9uPgoKICAgIDxk aXYgaWQ9ImFic29sdXRlLXBhcmVudCI+CiAgICAgIDxkaXYgaWQ9ImZpcnN0IiBjbGFzcz0iYWNj b3JkaW9uLXRhYiI+CiAgICAgICAgPGRpdiBjbGFzcz0idGFiLW91dGVyLWNvbnRlbnQiPgogICAg ICAgICAgPGRpdiBjbGFzcz0ic3F1YXJlIj4KICAgICAgICAgIDwvZGl2PgogICAgICAgIDwvZGl2 PgogICAgICA8L2Rpdj4KICAgICAgPGRpdiBpZD0ic2Vjb25kIiBjbGFzcz0iYWNjb3JkaW9uLXRh YiI+CiAgICAgICAgPGRpdiBjbGFzcz0idGFiLW91dGVyLWNvbnRlbnQiPgogICAgICAgICAgPGRp diBjbGFzcz0ic3F1YXJlIj4KICAgICAgICAgIDwvZGl2PgogICAgICAgIDwvZGl2PgogICAgICA8 L2Rpdj4KICAgIDwvZGl2PgogIDwvYm9keT4KCjwvaHRtbD4=