Molerose

Chrome浏览器,关于transition闪烁BUG
最近准备把再造一套模板出来,但是在使用 transition 属性的时候,在Google上出现了一个闪烁的BUG,...
扫描右侧二维码阅读全文
14
2018/06

Chrome浏览器,关于transition闪烁BUG

最近准备把再造一套模板出来,但是在使用 transition 属性的时候,在Google上出现了一个闪烁的BUG,在网上找了丢资料,看到一个可以绕开的办法。


常规选手编写的方式( transition 在Chrome下会造成闪烁的方法 )

.demo {
    position:relative;
    top: 0;
    transition: top 1s;
}
.demo:hover {
    top: -10px;
}

教练编写的方式( transform )

.demo {
    transform: transformY(0);
    transition: transform 0.5s;
}
.demo:hover {
    transform: transformY(-20px);
}

另外一种写法

.demo {
    background: #000; 
    position: relative;
    top: 0;
    width: 200px;
    height: 100px;
    transition: top .2s;
}
.demo:hover {
    top:-10px;
    -webkit-backface-visibility: hidden; 
    -webkit-transform-style: preserve-3d;
}

鸣谢:大前端

Last modification:June 15th, 2018 at 08:49 pm
If you think my article is useful to you, please feel free to appreciate

One comment

  1. 太阳黑子

    代码样式写得不错哦!

Leave a Comment