TYPECHO WIKI

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

发布者:Typecho维基君/更新日期:2018-06-05/人气指数:953

最近在写 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
赞助支持

添加新评论 »