ScrollReveal.js not working in Safari with <svg> elements

Question

I am currently using ScrollReveal.js to make a bunch of tiny pixel boxes random things when scrolling 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 works fine on Chrome, but in Safari the behavior is extremely awkward, not what I want. Could you or someone else understand why this is happening?

To illustrate, here is how it looks in Chrome:

https://gyazo.com/4f51ff8279cf5a76ad3ab38a680ae2af

Here's what it looks like on Safari:

https://gyazo.com/8c30e489a2470ac415da3dde1d95d4ef

For reference, one of these fields is rendered using 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 transforms and SVG elements such as <rect> and <path> in different browsers, but I didn’t do much.

Answer 1

Similar to a browser issue with animating Safari opacity and transforming at the same time.

... we encountered a particularly nasty bug in Safari related to animating SVG elements using CSS3 transforms and opacity at the same time.

Safari will not animate both attributes at the same time, instead choosing to animate opacity with the correct timings, and when this animation is complete, the transition goes to the right position or the translation is simply ignored completely.

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

Others seem to have had similar problems in the past, but a browser bug has been fixed.