Transition of max size of block in container with position leaves positioned children with animation rendered in wrong position

• Component: Animations
• Status: NEW ---

[Timo Kalliomäki]

Created attachment 373319 [details]
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.

[Radar WebKit Bug Importer]

<rdar://problem/52525498>

[Ahmad Saleem]

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!