最近在写 acgzone 的主题时,给图片添加了放大特效,通过 CSS 的 Transition 来实现鼠标焦点时放大,但会出现当图片放大时导致网页闪动,体验有点差。
于是Google关键字 “Chrome transition blink” 和 “Chrome transition css” 发现网上已经有很多人注意到这个问题,推测为Chrome 在初始渲染CSS动画时产生的 Bug,虽然暂时无法考证这个问题的根本原因,但是目前已知的解决方案有两条:
-webkit-backface-visibility: hidden;
(设置进行转换的元素的背面在面对用户时是否可见:隐藏)-webkit-transform-style: preserve-3d;
(设置内嵌的元素在 3D 空间如何呈现:保留 3D )