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.