[Webkit-unassigned] [Bug 283376] New: Bug Report: ::after Pseudo-Element z-index Issue with CSS Animations in Safari

[bugzilla-daemon at webkit.org]

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

            Bug ID: 283376
           Summary: Bug Report: ::after Pseudo-Element z-index Issue with
                    CSS Animations in Safari
           Product: WebKit
           Version: WebKit Nightly Build
          Hardware: All
                OS: All
            Status: NEW
          Severity: Normal
          Priority: P2
         Component: CSS
          Assignee: webkit-unassigned at lists.webkit.org
          Reporter: yashrajbharti.met18 at itbhu.ac.in
                CC: koivisto at iki.fi

This bug occurs in all tested versions of Safari (17.6 on an M3 chip and 17.5 on an Intel chip). It is specific to Safari and does not occur in Firefox or Chrome.

Problem:
When applying a CSS animation to a parent element that moves the parent 100% away from its ::after pseudo-element, the z-index of the pseudo-element behaves incorrectly. The pseudo-element's z-index should position it above the parent element, but in Safari, the pseudo-element ends up below the parent during the animation.

A quick fix was to avoid transitioning the parent element fully (100%) away from the pseudo-element by using 99% instead. However, this workaround shouldn't be necessary as the z-index behaviour is consistent in other browsers.

Code example:

```html
<h1><span>Bug in Safari</span></h1>
<br>
<h1 class="fix"><span>Quick fix</span></h1>
```

```css
body {
  font-family: sans-serif;
}
h1 {
  position: relative;
  display: inline-block;
}
h1::after {
  position: absolute;
  content: "";
  block-size: 100%;
  inline-size: 100%;
  background-color: red;
  left: 0;
  top: 100%;
}
h1.fix::after {
  top: 99%; /* The fix */
}

h1 span {
  display: inline-block;
  animation: slideUp 2.6s ease;
}

@keyframes slideUp {
  0% {
    translate: 0 100%;
  }

  100% {
    translate: 0 0;
  }
}
```

Live demo (with quick fix):

https://codepen.io/driftblaze/pen/NWQVmbN?editors=1100


Expected Behavior:
The ::after pseudo-element should always remain on top of its parent element as defined by the z-index regardless of the animation applied to the parent.

Actual Behavior in Safari:
The ::after pseudo-element's z-index incorrectly places it below the parent when the parent is animated to move 100% away.

Fix (Workaround):
Using 99% instead of 100% for the parent's animation resolves the issue in Safari but is not required in Firefox or Chrome.


Please let me know if more details are required. I appreciate your team's effort in improving Safari's rendering engine and would love to help and contribute as an open source dev as well.

-- 
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/20241119/f0575d45/attachment.htm>