Question

我使用jquery.scrollie.min.js来滚动时更改背景颜色。您可以找到我使用HERE的示例。我在改变背景时非常喜欢这种过渡效果。

因此，当我在页面上添加内容和更多动画时（在我的页面上，我在视口效果上也有一些wow.js），每当滚动页面时都会出现一些闪烁和FOUC。

这可能很奇怪，但我注意到这只闪烁在Safari中，例如Chrome就可以了。

<!--slide background-->
<div class="slide" data-background="#a4d4ab">
    <div class="inside">
        <p class="wow flipInX" data-wow-delay="1s">I Wanted to create a really simple pen</p>
    </div>
</div>
<!--END Slide Background-->

<!--slide background-->
<div class="slide" data-background="#e4e6cc">
    <div class="inside">
        <p class="wow flipInY" data-wow-delay="1s">A pen that uses some awesome colors <br /><span>awesome <a href="http://flatuicolors.com/" target="_blank">like these</a></span></p>
    </div>
</div>
<!--END Slide Background-->

过渡效果位于body标记：

body {
    height: 100%;
    color: #fff;
    font-family: Arial, sans-serif;
    transition: background 1s ease;
    font-weight: 400;
    font-size: 14px;
    overflow-x: hidden;
}

JS系列在滚动部分（body）时提供slide动态颜色：

$('body').css('background-color', bgColor);

之前有人遇到过这种问题吗？或者如何解决这个问题？

Safari过渡背景闪烁

0 个答案: