Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[css] 第67天 如何消除transition闪屏? #408

Open
haizhilin2013 opened this issue Jun 21, 2019 · 6 comments
Open

[css] 第67天 如何消除transition闪屏? #408

haizhilin2013 opened this issue Jun 21, 2019 · 6 comments
Labels
css css

Comments

@haizhilin2013
Copy link
Collaborator

第67天 如何消除transition闪屏?

@haizhilin2013 haizhilin2013 added the css css label Jun 21, 2019
@xiangshuo1992
Copy link
Contributor

xiangshuo1992 commented Jun 22, 2019

题目越简单越有含量。
看题意不知道在问什么,说明这个问题自己没注意或不熟悉,而不是去怀疑题目出的有问题。

这个问题自己没有遇到过,或者说没有注意过这个问题,网上搜索了下答案,不知道有没有效果,下次遇到这个问题就可以往这方面排查和思考了:

.css { 
    -webkit-transform-style: preserve-3d; 
    -webkit-backface-visibility: hidden; 
    -webkit-perspective: 1000; 
} 

@yxkhaha
Copy link

yxkhaha commented Jun 22, 2019

.css { 
    -webkit-transform-style: preserve-3d; 
    -webkit-backface-visibility: hidden; 
    -webkit-perspective: 1000; 
} 

@zhuyuedlut
Copy link

补充一下,transition闪屏发生的情况,搜了一下是在IOS的Safari浏览器下,使用transition来进行动画变换时候就会出现

@MrZ2019
Copy link

MrZ2019 commented Jan 7, 2021

.css { 
    -webkit-transform-style: preserve-3d; 
    -webkit-backface-visibility: hidden; 
    -webkit-perspective: 1000; 
} 

@KaijuanYuan
Copy link

请问有遇到过css循环动画transform从100%过渡到0%的时候出现闪屏的问题吗?用了以上方法和GPU加速都没有解决~

@1078559858
Copy link

overflow:hidden;可以解决。

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
css css
Projects
None yet
Development

No branches or pull requests

7 participants