Bug 199404 - Transition of max size of block in container with position leaves positioned children with animation rendered in wrong position
Summary: Transition of max size of block in container with position leaves positioned ...
Status: NEW
Alias: None
Product: WebKit
Classification: Unclassified
Component: Animations (show other bugs)
Version: Safari 12
Hardware: All All
: P2 Major
Assignee: Nobody
Keywords: InRadar
Depends on:
Reported: 2019-07-02 07:31 PDT by Timo Kalliomäki
Modified: 2019-07-15 09:15 PDT (History)
5 users (show)

See Also:

Minimal non-working example (1.93 KB, application/xhtml+xml)
2019-07-02 07:31 PDT, Timo Kalliomäki
no flags Details

Note You need to log in before you can comment on or make changes to this bug.
Description Timo Kalliomäki 2019-07-02 07:31:53 PDT
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.
Comment 1 Radar WebKit Bug Importer 2019-07-02 08:48:40 PDT