Safari Mobile - CSS transition when navigating away

Hi,

Safari Mobile - iOS 16.3.1

When a link is clicked the browser starts navigating away from a page. From that point on most CSS transitions seem to not be executed.

E.g. the transition of the attribute width is not being executed. However the transition of the attribute transform is executed.

When a link is being clicked the JS event listener adds the class loading to the alt-progress-bar node. The event is not stopped, so the browser starts unloading the page. I want the animation to be visible until the next page has loaded.

Examples:

This is the SCSS that does shows the transition:

.alt-progress-bar{
  position: fixed;
  top: 49px;
  height: 4px;
  background-color: var(--turbo-progress-bar-bg);
  z-index: 1031;
  transform: translate3d(-100%, 0, 0);
  width: 100%;
  transition: top linear 150ms;

  &.loading{
    transform: translate3d(0, 0, 0);
    transition: transform ease-in-out 2s, top linear 150ms; 
  }
}

This is the SCSS that does NOT shows the transition:

.alt-progress-bar{
  position: fixed;
  top: 49px;
  height: 4px;
  background-color: var(--turbo-progress-bar-bg);
  z-index: 1031;
  transform: translate3d(-100%, 0, 0);
  width: 0%;
  transition: top linear 150ms;

  &.loading{
    width: 100%;
    transition: width ease-in-out 2s, top linear 150ms; 
  }
}

I'm not able to find any documentation on this behaviour. Does someone have any insight? Thank you!