在带有<svg>元素的Safari上不能使用ScrollReveal.js

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在Safari中遇到了一个特别令人沮丧的bug，涉及同时使用CSS3变换和不透明度的SVG元素动画。

Safari不会同时为这两个属性设置动画，而是选择使用正确的计时设置不透明度的动画，当动画完成时，变换跳到其正确的位置，或者完全忽略平移。

参考：https://www.theparticlelab.com/safari-svg-animation-bug/

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