Chrome 浏览器CSS动画渲染 Transition 时页面闪动 Bug

最近在写 acgzone 的主题时,给图片添加了放大特效,通过 CSS 的 Transition 来实现鼠标焦点时放大,但会出现当图片放大时导致网页闪动,体验有点差。

于是Google关键字 “Chrome transition blink” 和 “Chrome transition css” 发现网上已经有很多人注意到这个问题,推测为Chrome 在初始渲染CSS动画时产生的 Bug,虽然暂时无法考证这个问题的根本原因,但是目前已知的解决方案有两条:

-webkit-backface-visibility: hidden;(设置进行转换的元素的背面在面对用户时是否可见:隐藏)
-webkit-transform-style: preserve-3d; (设置内嵌的元素在 3D 空间如何呈现:保留 3D )

Updated: 05/06/2018 — 09:23

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注