[Webkit-unassigned] [Bug 276281] New: Animating elements using individual transform properties breaks order of layers

[bugzilla-daemon at webkit.org]

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

            Bug ID: 276281
           Summary: Animating elements using individual transform
                    properties breaks order of layers
           Product: WebKit
           Version: Safari 17
          Hardware: All
                OS: Unspecified
            Status: NEW
          Severity: Normal
          Priority: P2
         Component: Animations
          Assignee: webkit-unassigned at lists.webkit.org
          Reporter: maggotfish at gmail.com
                CC: graouts at apple.com

When moving a layer using the translate property the order of layers is correct.
However, when animating the same movement, if there isn't any other property that kicks the engine into creating a layer, the layer seem to be composited on top of other layers.

See full example: https://jsbin.com/cubitagazi/1/edit?html,css,output

Extract:

```
@keyframes moveTranslate {
  to {
    translate: 0 200px;
  } 
}


#a {
  animation: moveTranslate 2s infinite alternate linear;
}
```

Doing the same animation with `transform: translateY(200px)` yields correct results.
Adding `will-change: translate`, as should be done by the UA by default per spec, yields correct results.

Seems to be happening only when animating, both CSS and WAAPI.

Works correctly on Blink & Gecko.

-- 
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/20240706/5778bbc3/attachment.htm>