Bug 283376 – ::after pseudo-element z-index Issue with CSS animations

• Status: NEW
• Component: Animations

[Yash Raj Bharti]

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.

[Radar WebKit Bug Importer]

<rdar://problem/140593251>

[Ahmad Saleem]

@Yash - can you retest this with Safari Technology Preview to confirm whether the issue still exists or not?

[Yash Raj Bharti]

It still exists with Safari Technology Preview.
I tested on Release 208 (Safari 18.2, WebKit 19621.1.5.1)