IOS下Safari渲染Transition时页面闪动Bug

前端开发工程师

于 2012-05-17 11:30:39 发布

阅读量2.2k

点赞数

CC 4.0 BY-SA版权

分类专栏： CSS样式 webkit webApp 开发 HTML5开发

本文链接：https://blog.youkuaiyun.com/caibinghong/article/details/84219320

34 篇文章

订阅专栏

13 篇文章

订阅专栏

9 篇文章

订阅专栏

本文介绍了在iOS Safari环境下使用CSS3 Transition属性时遇到的闪屏问题及其解决方案。提供了两种有效的方法来解决此问题：一是使用-webkit-transform-style:preserve-3d;二是设置-webkit-backface-visibility为hidden。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

环境：IOS的Safari环境

问题：在做移动端左右滑动的时候，用到了CSS3的Transition属性来进行动画变换，结果每次渲染Transition属性时，出现闪屏现象。

解决办法：在网上查了一下，有一下两种解决办法，

方法一：

 
   1 -webkit-transform-style: preserve-3d; 

   2/*设置内嵌的元素在 3D 空间如何呈现：保留 3D*/

方法二：

`1`	`-webkit-backface-visibility:` `hidden;`

`2`	`/（设置进行转换的元素的背面在面对用户时是否可见：隐藏）/`