[Webkit-unassigned] [Bug 199404] New: Transition of max size of block in container with position leaves positioned children with animation rendered in wrong position

[bugzilla-daemon at webkit.org]

https://bugs.webkit.org/show_bug.cgi?id=199404

            Bug ID: 199404
           Summary: Transition of max size of block in container with
                    position leaves positioned children with animation
                    rendered in wrong position
           Product: WebKit
           Version: Safari 12
          Hardware: All
                OS: All
            Status: NEW
          Severity: Major
          Priority: P2
         Component: Animations
          Assignee: webkit-unassigned at lists.webkit.org
          Reporter: timoka10+webkit-bugzilla at gmail.com
                CC: dino at apple.com

Created attachment 373319

  --> https://bugs.webkit.org/attachment.cgi?id=373319&action=review

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.

-- 
You are receiving this mail because:
You are the assignee for the bug.
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.webkit.org/pipermail/webkit-unassigned/attachments/20190702/4d9bfab1/attachment.html>