Skip to content

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

Open
@haizhilin2013

Description

@haizhilin2013
Collaborator

第67天 如何消除transition闪屏?

Activity

xiangshuo1992

xiangshuo1992 commented on Jun 22, 2019

@xiangshuo1992
Contributor

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

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

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

yxkhaha commented on Jun 22, 2019

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

Lucenova commented on Sep 17, 2019

@Lucenova

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

smile-2008

smile-2008 commented on Jan 7, 2021

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

KaijuanYuan commented on Mar 15, 2021

@KaijuanYuan

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

1078559858

1078559858 commented on Jul 26, 2022

@1078559858

overflow:hidden;可以解决。

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

      Development

      No branches or pull requests

        Participants

        @smile-2008@haizhilin2013@1078559858@xiangshuo1992@KaijuanYuan

        Issue actions

          [css] 第67天 如何消除transition闪屏? · Issue #408 · haizlin/fe-interview