使用滚动动画在站点中闪烁固定标题 [英] 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屋！