ScrollReveal.js not working on Safari with

Question

I'm currently using ScrollReveal.js to make a bunch of tiny pixelated boxes do random things when scrolled upon, with the following code:

var index=0;
$(document).ready(function(){
    jQuery('.pixel-box').each(function() { //each tiny box has class pixel-box
        var directions =[ 'left', 'right', 'top', 'bottom']

        index += 1

        var currentElement = $(this);
        var randEffect = getRandomInt(0,1);
        var randTime = getRandomArbitrary(1, 3.5);
        var randDirection = getRandomInt(0,3);

        if(randEffect == 0){
            var rand = getRandomInt(-360, 360);
            $(this).attr('data-sr', 'wait .5s, enter ' + directions[randDirection] + ', flip ' + rand + 'deg, over '+ randTime +'s');
    }
        else if(randEffect == 1){
            // move 24px
             var rand = getRandomInt(10, 120);
            $(this).attr('data-sr', 'wait .5s, enter ' + directions[randDirection] +', move '+ rand + 'px, over '+ randTime +'s');
        }


        if(index == 81){
             window.sr = new scrollReveal();
        }
    });
});

It's working perfectly on Chrome, but on Safari, the behavior is extremely clunky and not what I want. Would you or anyone else have any insights as to why this is happening?

To illustrate, here's what it looks like on Chrome:

https://gyazo.com/4f51ff8279cf5a76ad3ab38a680ae2af

Here's what it looks like on Safari:

https://gyazo.com/8c30e489a2470ac415da3dde1d95d4ef

For reference, one of these boxes is being rendered using the HTML code:

<rect class="pixel-box" id="Rectangle-167-Copy-7" fill="#FDD93D" filter="url(#filter-35)" x="823.65422" y="188.994877" width="16.675" height="19.0983607"></rect>

I suspect that the problem may be due to inconsistencies with CSS transformations and SVG elements like <rect> and <path> across different browsers, but I haven't been coming up with much.

score 2 · Answer 1 · edited May 23 '17 at 11:52

Looks like a browser issue with Safari animating opacity and transforms at the same time.

...we came across a particularly frustrating bug in Safari involving animation of SVG elements using CSS3 transforms and opacity simultaneously.

Safari will not animate both attributes at the same time, instead choosing to animate the opacity with the correct timings and when that animation is complete the transform jumps to its correct position, or the translation is just ignored completely.

Reference: https://www.theparticlelab.com/safari-svg-animation-bug/

Looks like others have had similar problems in the past, but the browser bug appears fixed.

ScrollReveal.js not working on Safari with elements

1 Answers1

ScrollReveal.js not working on Safari with