jQuery stops working after page reload on Firefox

Question

I recently published a website with a simple SVG animation of a Panda on a rocket. As soon as the user scrolls down, the image changes to another SVG with an animation of the panda going up and away from the screen.

The website: https://www.jonnyekholm.fi

I'm using this simple script to make it happen:

<div style="left:10%;" id="rocket" >
<img width="30%" height="auto" src="https://www.aaltowave.com/img/RocketPanda.svg" />
</div>

<script>
jQuery(window).scroll(function() {
jQuery( "img[src='https://www.aaltowave.com/img/RocketPanda.svg']" ).attr("src","https://www.aaltowave.com/img/RocketPanda2.svg");
});

</script>

This works fine on Chrome.

This also works on Firefox, at first. But if you reload the page and scroll down again then the panda just disappears. Same thing happens in Safari.

Im also using this script on the same page, to make the panda move across the screen at a later point:

<div id="trigger"></div>
<img src="https://www.aaltowave.com/img/still2.svg"/>
<script>
jQuery(function() {
var $window = jQuery(window);
var endpoint = jQuery("#trigger").offset().top - $window.height();
$window.on('scroll', function() {
if ( (endpoint) < $window.scrollTop() ) {
jQuery( "img[src='https://www.aaltowave.com/img/still2.svg']" ).attr("src","https://www.aaltowave.com/img/movement22.svg");} });});</script>

This works fine on Chrome.

On Safari this doesn't execute on reload, just like with the previous animation.

On Firefox however, the animation doesn't occur at all except for one or two occasions. This tells me that the script does in fact work on firefox, but it executes on a weirdly basis.

How can I make the panda animations show up on Firefox?

I would appreciate it very much if anybody could help me with solving this problem. Thank you in advance!

when i load this in FF and begin to scroll i see the following > This site appears to use a scroll-linked positioning effect. This may not work well with asynchronous panning; see https://developer.mozilla.org/docs/Mozilla/Performance/ScrollLinkedEffects for further details and to join the discussion on related tools and features! — happymacarts, Feb 12 '18 at 16:23
This shows up in the console, both when the animation works and after the page reload: "This site appears to use a scroll-linked positioning effect. This may not work well with asynchronous panning; see https://developer.mozilla.org/docs/Mozilla/Performance/ScrollLinkedEffects for further details and to join the discussion on related tools and features!" — Jonny Ekholm, Feb 12 '18 at 16:23
I have a few thoughts.. 1) it might be a cache issue on reload the animation is loaded but at the last frame where it is already off the screen. 2) when the page is reloaded it passes the scroll position to the reload so if you were not at the top it will be past the animation trigger. (i don't have much experience with animations) — happymacarts, Feb 12 '18 at 16:28
I did a little more research and it seems as tho you must force an image reload for this to do what you need. see if [this post](https://stackoverflow.com/questions/5966385/update-svg-dynamically) will help — happymacarts, Feb 12 '18 at 16:40
Thank you very much for your thoughts and research! To force an image reload I chose to add a unique cache-busting query parameter to the URL. This way the image bypasses caching and reloads everytime. I applied the same configurations to the other animation. Now it works more or less like it should. Thank you — Jonny Ekholm, Feb 13 '18 at 19:15
After some more research, this solves the issue for the first animation, but the second one only shows up if the user has scrolled down to the location and then reloads the page. Not in any other occasion. Still working on a solution for the second animation... — Jonny Ekholm, Feb 13 '18 at 19:30

Jonny Ekholm · Accepted Answer · 2018-02-13T19:42:32.750

Based upon happymacarts suggestions, this is most likely a cache issue. On reload the animation is loaded, but at the last frame where it is already off the screen. One must force an image reload for this to succeed.

To be able to reload the image and bypass the caching I added a unique query parameter to the URL and put the scripts together:

jQuery(window).scroll(function() {
jQuery( "img[src='https://www.aaltowave.com/img/RocketPanda.svg']" ).attr("src","https://www.aaltowave.com/img/RocketPanda2.svg?t=" + new Date().getTime());
jQuery( "img[src='https://www.aaltowave.com/img/still2.svg']" ).attr("src","https://www.aaltowave.com/img/movement22.svg?t=" + new Date().getTime());
});

Chrome: Works like charm
Safari: Works like charm
Firefox: This solves the issue for the first animation, but the second one only shows up if the user has scrolled down to the location and then reloads the page. Not in any other occasion. Still working on a solution for the second animation...

jQuery stops working after page reload on Firefox

1 Answers1