Animation with javascript and css only loaded once by Safari after page load

user_11595229 0
Viewed 179

I am creating a Login Popup on a Website. I just noticed that when opening the popup with Safari multiple times (opening and closing it) the animation will only show when the modal is opened for the first time after a page load. In Chrome everything is working perfectly fine and the animation is displayed every time. I simplified the issue in this codepen, where the problem is also apparent. https://codepen.io/bvonr/pen/BaZVxxK Whats the reason for this behaviour. How can I fix this problem, so that the animation shows all the time not only in Chrome but also in Safari? I assume the problem is within these lines of my CSS.

.animate {
    animation: zoom 0.6s
}
@keyframes zoom {
    from {transform: scale(0)}
    to {transform: scale(1)}
}
safari css html javascript
1 Answers

A common solution to "things happening before my page load" is to listen to the page has loaded event, then do stuff:

window.addEventListener('load', () => {
  const myAnimationElement = document.querySelector("#my-animation-element")
  myAnimationElement.classList.add("animate");
});

This event will only fire when the whole page has loaded and all dependent resources. load event

regarding your CSS it seems fine and if this doesn't solve it you can try removing the class from your element and the animation with it before the page unloads by listening to the right event and then removing the class when it fires, but this seems very weird that you would need to do that. unload event

Also I would check this webpage: https://caniuse.com/?search=animations

I hope this helps and sorry if it doesn't.

user_135092540
Related