css滑动div不流畅怎么回事

html-css029

css滑动div不流畅怎么回事,第1张

css滑动div不流畅是因为使用了scroll属性。根据查询相关信息，div或模块使用了overflow：scroll属性，在iOS系统的手机上浏览时，则会出现明显的卡顿现象，但是在android系统的手机上则不会出现该问题。以下代码可解决这种卡顿的问题：-webkit-overflow-scrolling：touch。，是因为这行代码启用了硬件加速特性，所以滑动很流畅。这个方法的确可以解决以后系统的滑动卡顿问题。

使用transform属性的CSS动画看起来比使用left和top属性的动画更平滑。 但是如果你问，“我如何从GPU获得平滑的动画？”在大多数情况下，你会听到像“使用transform:translateZ(0）或will-change:transform这样的建议。著作权归作者所有。 这个问题是因为使用transform和opacity做CSS动画的时候，会将元素提升为一个复合层；而使用js操作css属性做动画时，必须使用translateZ或will-change才能将元素强行提升至一个复合层。 元素本身使用transform和opacity做CSS动画的时候，会提前告诉GPU动画如何开始和结束及所需要的指令；所以会创建一个复合层（渲染层），并把页面所有的复合层发送给GPU；作为图像缓存，然后动画的发生仅仅是复合层间相对移动。 而使用js做动画，js必须在动画的每一帧计算元素的状态；发送给GPU，但不会将元素提升至一个复合层；所以想让元素提升至一个复合层，必须使用translateZ或will-change: transform, opacity。 使用 translate3D 会让浏览器开启硬件加速，性能当然就提高了。translateZ变成3d效果，走GPU渲染。这样也有缺点就是耗电和发热问题。同样的canvas也会开启gpu渲染。CSS3开启GPU硬件加速然后chrome输入chrome://flags/ 能看到这么一句“允许使用 GPU 执行 2D 画布渲染（而非使用软件渲染）”。说明2d是软件渲染的。 参考文献:https://segmentfault.com/q/1010000007962353  https://www.w3cplus.com/animation/gpu-animation-doing-it-right.html  ©  w3cplus.com