使用滚动动画在站点中闪烁固定标题 [英] Blinking fixed header in site with scrolling animation

问题描述

所以我把一个网站在一起，将有一些css3动画触发滚动事件。通过编写滚动动画大约一半，我注意到在页面的标题和其他位置闪烁许多：固定的元素。

So I'm putting a website together which will have a few css3 animations triggered on the scroll event. About halfway through writing the scrolling animations, I'm noticing a lot of blinking on the page's header and other position:fixed elements.

我可以做些什么来尽量减少这种闪烁吗？ （理想情况下没有jQuery）

Is there something I can do to minimize this blinking? (Ideally without jQuery)

推荐答案

好吧，看起来这个问题可能是孤立的chrome和固定定位元素当CSS动画在滚动期间触发时呈现。

Well, it looks like this issue is probably isolated to chrome and the speed at which fixed positioned elements render when CSS animations are firing off during scroll.

我想查看这个小技巧是否会硬件加速元素实际上是chrome中CSS动画的主题。原来是这样。 ：）

I wanted to see if this little trick would hardware-accelerate elements that weren't actually the subject of a CSS animation in chrome. Turns out it did. :)

以下是解决方案：

.topbar
{
    -webkit-transform: translate3d(0,0,0);
}

这篇关于使用滚动动画在站点中闪烁固定标题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！