[Webkit-unassigned] [Bug 204602] New: [Web Animations] Layout of children of element with forwards-filling opacity animation may be incorrect after removal

bugzilla-daemon at webkit.org bugzilla-daemon at webkit.org
Tue Nov 26 00:32:46 PST 2019


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

            Bug ID: 204602
           Summary: [Web Animations] Layout of children of element with
                    forwards-filling opacity animation may be incorrect
                    after removal
           Product: WebKit
           Version: Safari Technology Preview
          Hardware: Unspecified
                OS: Unspecified
            Status: NEW
          Severity: Normal
          Priority: P2
         Component: Animations
          Assignee: webkit-unassigned at lists.webkit.org
          Reporter: graouts at apple.com
                CC: dino at apple.com

Consider this markup:

        <div class="container animates" onAnimationEnd="event.target.classList.remove('animates')">
            <div class="text">Hello.</div>
        </div>

With these style rules:

        .container {
            margin-left: 100px;
            margin-top: 100px;
        }

        .animates {
            animation: fade 1s forwards;
        }

        .text {
            position: relative;
        }

        @keyframes fade {
            from { opacity: 0; }
            to   { opacity: 1; }
        }

As the animation runs, container has a layer because it has opacity < 1 and when it’s laid out originally it has a non-0,0 position. Meanwhile .text always has a layer because it has position: relative and it has a 0,0 position.

As the animation ends, container still has a layer because its animation has fill: forwards and so we set setUsedZIndex(0) in KeyframeEffect::apply() because the spec tells us to (https://w3c.github.io/web-animations/#side-effects-section) since the animation targets opacity, a property which impacts whether an element establishes a stacking context.

As the animation is removed, then the old style for container has usedZIndex() == 0 while the new style has hasAutoUsedZIndex() == true, which is expected as the animation is gone.

However, when we get in that state RenderStyle::diff() will only return RepaintLayer and not Layout.

-- 
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/20191126/f32d659b/attachment.htm>


More information about the webkit-unassigned mailing list