Javascript ScrollReveal.js不使用<；svg>；元素

我目前正在使用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上的外观：

下面是它在Safari上的样子：

作为参考，其中一个框使用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元素（如

和

）不一致造成的，但我一直没有提出太多的建议

看起来像是浏览器问题，Safari同时设置不透明动画和变换

…我们在Safari中遇到了一个特别令人沮丧的错误 使用CSS3变换和不透明度的SVG元素动画 同时

Safari不会同时设置两个属性的动画 选择以正确的计时设置不透明度的动画，以及 动画完成变换跳到正确位置，或 翻译完全被忽略了

参考：

看起来像过去的其他人一样，但是