Cannot get starting:translate-y to work properly in safari. Coding it in CSS works

[RaederDev]

I'm not sure if this is a tailwind or safari bug but I ran into an issue where starting-style seems to break.
https://play.tailwindcss.com/ClQpDWz4UT
The red square is supposed to animate up to the top from the bottom. This works in Chrome and FF but not Safari 18.5.

I recreated the example with plain CSS and it works properly in Safari:
https://codepen.io/RaederDev/pen/VYLxGqx

I cannot figure out what tailwind is doing differently here or how to solve this.

[hjaber]

Spent a long time debugging a <dialog>'s starting:open:translate-y-200 and came to the same conclusion/fix as you.

Potentially @starting-style fails to apply when the value that changes is inside a custom property.

.starting\:translate-y-200 {
    @starting-style {
      --tw-translate-y: calc(var(--spacing) * 200);
      translate: var(--tw-translate-x) var(--tw-translate-y);
    }
  }

[atoka-tech]

It appears that things do not work correctly when using a custom property that is defined with @property and has inherits: false.

@property --custom-prop {
  syntax: '*';
  inherits: false;
  initial-value: 0;
}

div {
  @starting-style {
    translate: var(--custom-prop) 100px;
  }
}

https://codepen.io/atoka/pen/ogLNmGB

This behavior is not limited to translate; the same issue occurs with other properties such as inset.

/* not working */
div {
  @starting-style {
    inset: var(--custom-prop) 100px;
  }
}

Interestingly, if inherits: true is set, it starts working for some reason.

As a workaround, avoiding shorthand properties seems to help. For example, using translateY instead of translate works:

<div class="mt-50 h-10 w-10 bg-red-500 duration-1000 starting:transform-[translateY(400px)]"></div>

https://play.tailwindcss.com/0cymnj8rWQ