Aos: Animations not firing in Safari sometimes

[fsmoffice]

In Safari-Browser the animations are not firing sometimes. I cannot reproduce this issue, it appearrs to be random.

However, if you scroll down on the page until the elements that should be animated reach the top of the browser-window, the elements begin to appear.

I set the anchor-placement to "top-bottom", in other browsers its working fine.

[ckollars]

I'm having the same issue. It seems to fire once you resize the browser.

I'm only using the basic setup

// initiate AOS magic
AOS.init({
  once: true,
});

Inspector view:

<div class="four columns aos-init" data-aos="fade-up">...</div>

Some reason it's not triggering the 'inview'.

[ckollars]

For now I'm just setting a timeout with a hard refresh until I have more time looking into this.

setTimeout(AOS.refreshHard, 150);

[fsmoffice]

Yes I tried setting a timeout, too, did`nt work for me. I read in another thread to trigger AOS.refresh(), like this:

AOS.init({
    startEvent: 'load'
});

$(window).on('load', function() {
    AOS.refresh();
});

Seems to be working fine.

[remsan03]

I also find this issue happening in Chrome. As you load the page, only the first image got animated and the rest stay still as if no animation applied. Only after I resize the browser windows the AOS gets activated.
The script place before the as suggested by fsmoffice seems to fix this:

<script>
AOS.init({
    startEvent: 'load'
});

$(window).on('load', function() {
    AOS.refresh();
});
</script>

[AgileFlexAgency]

Don't worry guys it is a minor bug that shall be fixed nevertheless :)
A potential issue could be the use of the condition (document.readyState) within aos.js which would not work every time in Chrome/Firefox.

[michalsnik]

Okay, let me explain what is probably happening to you guys.

First of all it's not a bug per se. If you init AOS on document ready, that mean all the positions are being calculated right after HTML is loaded. If you have images on your page or other things that may change positions of other elements while loading - AOS can calculate wrong positions and it might look like some elements are not animating, in fact they are animating, but too early because of the wrong trigger positions.

In order to fix this you should refresh AOS after everything on your page is loaded (so that all elements are on theirs final positions). This should do the trick:

window.addEventListener('load', AOS.refresh);

I'll add short FAQ in README to make sure it's obvious for anyone.

[fsmoffice]

Thank you all for your replies,

the Issue seems to be resolved, at least for me.

Thank you @michalsnik for the explanation.

[kaustav-mnm]

Already added, still not working.

[GoAndrew]

Already added, still not working.

Yes, it doesn't work for me too!