ScrollReveal.js 不适用于带有 <svg> 元素的 Safari答案

【问题标题】：ScrollReveal.js not working on Safari with <svg> elementsScrollReveal.js 不适用于带有 <svg> 元素的 Safari
【发布时间】：2015-11-02 23:53:38
【问题描述】：

我目前正在使用 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>）在不同浏览器中的不一致，但我没有想出太多。

【问题讨论】：

标签： javascript css svg css-transforms scrollreveal.js

【解决方案1】：

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

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

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

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

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

【讨论】：