TYPECHO WIKI
每一个作品都值得被记录

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

Typecho维基君Typecho教程 • 2289次浏览 • 发布 2018-06-05 • 更新 2018-06-05

最近在写 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所有文章均包含本声明。
厂商投放

【腾讯云】🎉五一云上盛惠!云服务器99元/月续费同价!

腾讯云五一劳动节海量产品 · 轻松上云!云服务器首年1.8折起,买1年送3个月!超值优惠,性能稳定,让您的云端之旅更加畅享。快来腾讯云选购吧!

广告
添加新评论 »