Typecho Wiki
每一个作品都值得被记录

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

Typecho维基君Typecho教程 • 2145次浏览 • 发布 2018-06-05 • 更新 2018-06-05
极致加速的V2Ray 助您畅享全球网络 & 搬瓦工VPS最新优惠码

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

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

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

广告声明:文内含有的对外跳转链接(包括不限于超链接、二维码、口令等形式),用于传递更多信息,节省甄选时间,结果仅供参考,Typecho.Wiki所有文章均包含本声明。
本文检索关键词:typecho
厂商投放
添加新评论 »