Bug 281647 – iOS 18 animations using "infinite"

• Status: NEW
• Component: Animations

I have a page that has a pulsing div animation which uses the animation-iteration-count: infinite

With users running iOS 18 and up, this animation now break if any other animation (e.g. toggling a  or dropping of a modal takes place somewhere else in the application. 

For example, I have a tab structured application which means that if a user navigates to another tab, that previous page will not have been ngDestroy-ed. User encounters an animation somewhere else on the platform, then goes back to the original tab where the pulsing div is. This is now displaying with no animation anymore as if the "infinite" count has been removed. When inspecting the element, the css still shows all the correct tags. Destroying the page and navigating back to it, renders the animation correctly again with infinite iteration count until the user encounters another animation.

This is only happening on iOS 18 platforms.

For reference the code animation is as follows:


<div class="blip-pulse position-absolute top-0 bottom-0 end-0 start-0 rounded-circle"></div>


.blip-pulse {
  animation-name: marketBlipAnimation;
  animation-duration: 3s;
  animation-iteration-count: infinite;
}

@keyframes marketBlipAnimation {
  0% {
    -webkit-transform: scale(0.3);
    transform: scale(0.3);
    opacity: 0.9;
  }
  100% {
    -webkit-transform: scale(0.9);
    transform: scale(0.9);
    opacity: 0;
  }
}

Upon further tests it seems to be occurring regardless what animation-iteration-count was used. (Tried it with 10000 and same issue occurs)

[Antoine Quint]

Hi Kirsten. Thanks for filing this bug. It would greatly help if you could attach a simple file that reproduces the issue.

Created attachment 472978 [details]
CSS animations shows my keyframe animation

When inspecting in Safari under the Graphics tab, I can see my animation correctly being logged under CSS Animations. However when I navigate away, and action another css animation somewhere else, and then come back, this section is now empty (even though my html is still on the screen where the animation is attached). 

Navigating away and then back, suddenly populates it back here under Graphics.

Created attachment 472979 [details]
CSS Animation doesn't populate again when navigating back to this page

CSS Animation doesn't populate again when navigating back to this page. CSS all still attached and showing under the Elements inspection. Just no animation occurring anymore on the screen.

[Radar WebKit Bug Importer]

<rdar://problem/138534005>