javascript – ScrollReveal.js无法在Safari上使用元素

2023年2月27日 257次阅读

我正在使用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>跨越不同的浏览器,但我没有提出太多.

最佳答案 看起来浏览器问题与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.

点赞