particle-slider logo won't resize in Safari

The resize event can fire multiple times, and within that event anything you put in a setTimeout will get called after the current code block has executed. It's hard to say for sure without picking apart ParticleSlider, but I think the mix of global variables (nextFrameCalled, oldWidth) and callbacks firing out of your expected order is the cause.

I think the intention is to debounce the forced restart - you want to call ParticleSlider.nextFrame() but if it's already been called you want to wait 100ms first.

Looking at the answer you've adapted for this question that appears to be a workaround for the canvas element not being visible on requestAnimationFrame - that might still not be available after 100ms or after the ParticleSlider.nextFrame() has been called multiple times in an attempt to get it to fire.

From your original question and selected answer I think you need to ParticleSlider.init() to reset the component, but the flashing you're seeing is due to the fact that it takes a while to run every time it's called. ParticleSlider.nextFrame() doesn't take as long (and uses requestAnimationFrame to avoid jank) but doesn't create the canvas on resize in Safari.

So, to fix:

1. Use ParticleSlider.init()
2. Debounce the resize event so you're not firing it lots of times
3. Fire it once a short delay after the user has stopped firing resize events.

Code will be something like:

var timeout = null;window.addEventListener('resize', function() {    // Clear any existing debounced re-init    clearTimeout(timeout);    // Set up a re-init to fire in 1/2 a secound    timeout = setTimeout(function() {        ps.init();    }, 500);});

You'll still see the flash and the delay as the component re-initialises, but only once.

I'd add that ParticleSlider has been deprecated by the authors and replaced with NextParticle - probably to fix these kinds of issues (in fact it has specific features to handle resizing). As it is a paid for component I'd suggest asking them for the help with this, as you should get your money's worth (or switch to an open source component where you can fix these bugs yourself).

So, I've finally figured this out by retracing my steps using the Q&A from before. Previously there seemed to be an issue with some of the sample links but one appears to work now - example.

I went into the page inspector and noticed a few differences between the code firing this example and the one in the actual answer that was causing the logo to flicker like a light bulb. This is the code I have now put into the wordpress site -

<script type="text/javascript">        //wait until the DOM is ready to be queried        (function() {//document.addEventListener('DOMContentLoaded', function() { //DOM-ready callback            var ps, timeout;            var img1 = new Image();            img1.src = '<?php echo home_url(); ?>/wp-content/uploads/2017/10/havoc_logohight.png';//havoc_logo_e6os2n.png';            var imgs = [ img1 ];            handlePS();            window.addEventListener('resize', function() {                //https://davidwalsh.name/javascript-debounce-function                if (timeout) { //check if the timer has been set                    clearTimeout(timeout); //clear the timer                }                //set a timer                timeout = setTimeout(handlePS, 250);            });            function handlePS() {                if (document.body.clientWidth >= 960) {                    //check if ps is assigned as an instance of the ParticleSlider                     if (ps != undefined && typeof ps !== null) {                        ps.init(); //refresh the particle slider since it exists                        console.log('called init on ps');                    } else {                            if (window.location.search.indexOf('d=1') > -1) {                                    debugger;                            }                        //otherwise create a new instance of the particle slider                        ps = new ParticleSlider({                            width: 1400,                             height: 600,                            imgs: imgs                        });                    }                }                else {                    //when the flat logo is displayed, get rid of the particle slider instance                 //   delete ps;                    ps = null;                }            }        })();    </script>

It now works fine across all the main browsers - Chrome/Safari/Firefox. It still feels a bit clunky as it pushes the rest of the page down whilst it is re-sizing and it takes probably a few seconds more than I'd like - not sure if there's a timer option to speed the reanimation up? Otherwise, everything is working fine.