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中遇到了一个特别令人沮丧的错误   使用CSS3变换和不透明度的SVG元素的动画   同时进行。

Safari不会同时为两个属性设置动画   选择使用正确的时间设置不透明度的动画   动画完成后，变换会跳转到正确的位置，或者   翻译完全被忽略了。

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

其他人看起来过去曾similar problems，但browser bug appears fixed。

ScrollReveal.js无法使用<svg>元素在Safari上工作

1 个答案: