exit-crossing with a px value not working consistently

[callie-openai]

I have a position: sticky type of interface I'm building with this. It's relatively simple but I want to clip the contents of the non-sticky container when it goes past a threshold on the exit-crossing bounds.

// title or target height is 32px
animation: clip-out linear both;
animation-timeline: view(block);
// animation-range: exit-crossing -64px exit-crossing 32px;
animation-range: exit-crossing -64px exit-crossing calc(-64px + 100%);

I use simple markup like the following tailwind-esque to create a little playground:

<h3 className={clsx(styles.cardHeader, styles.cardHeaderAnimation)}>
  Yesterday
</h3>
<ul className={clsx(styles.cardContents, styles.cardContentsAnimation)}>
  <li>Conversation 1</li>
  <li>Conversation 2</li>
  <li>Conversation 3</li>
</ul>
<h3 className={clsx(styles.cardHeader, styles.cardHeaderAnimation)}>
  Previous 7 days
</h3>
<ul className={clsx(styles.cardContents, styles.cardContentsAnimation)}>
  <li>Conversation 1</li>
  <li>Conversation 2</li>
  <li>Conversation 3</li>
</ul>
<h3 className={clsx(styles.cardHeader, styles.cardHeaderAnimation)}>
  Previous 30 days
</h3>
<ul className={clsx(styles.cardContents, styles.cardContentsAnimation)}>
  <li>Conversation 1</li>
  <li>Conversation 2</li>
  <li>Conversation 3</li>
</ul>
<h3 className="sticky top-[32px] my-2">Previous 90 days</h3>
<ul className={clsx(styles.cardContents, styles.cardContentsAnimation)}>
  <li>Conversation 1</li>
  <li>Conversation 2</li>
  <li>Conversation 3</li>
</ul>

This works flawlessly in Chrome, but in Safari it clips it way too early and incorrectly. I'm assuming this might be due to position: sticky?

Safari Example

Screen.Recording.2024-10-18.at.4.55.37.PM.mov