javascript - ScrollReveal.js 不适用于带有 元素的 Safari

Question

我目前正在使用 ScrollReveal.js 使一堆微小的像素化框在滚动时做随机的事情，代码如下:

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();
        }
    });
});

它在 Chrome 上运行完美，但在 Safari 上，行为非常笨拙，这不是我想要的。您或其他任何人对发生这种情况的原因有任何见解吗？

为了说明，这是它在 Chrome 上的样子:

https://gyazo.com/4f51ff8279cf5a76ad3ab38a680ae2af

这是它在 Safari 上的样子:

https://gyazo.com/8c30e489a2470ac415da3dde1d95d4ef

作为引用，这些框之一正在使用 HTML 代码呈现:

<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>

我怀疑问题可能是由于 CSS 转换和 SVG 元素不一致造成的，例如 <rect>和 <path>跨不同的浏览器，但我没有想出太多。

Answer 1

看起来像是 Safari 动画不透明度和同时变换的浏览器问题。

...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.

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

看起来其他人有过similar problems在过去，但是browser bug appears fixed .