关注前端开发
关注用户体验

chrome transition闪烁BUG

    前段时间写鼠标悬停元素上移效果时,当鼠标恰好放在元素边缘时,chrome出现一直上下移动的问题,其他浏览器表现正常。原因尚不知,可能是实现方式不对吧(PS:使用top实现),虽然不知道原因,但是问题还是要解决的,分享一个能绕开的实现方式。

    说到鼠标悬停元素上移,首先想到的是鼠标悬停时元素上移,然后应用transition来实现渐变效果。

    1、使用top实现(该实现方式chrome浏览器闪烁,避免使用)

<!--html-->
<div class="test"></div>

/*css*/
.test {
     position: relative;
     top: 0; 
     transition: top 0.5s;
 }

.test:hover{
     top: -10px;
 }

    2、使用transform实现(推荐)

<!--html-->
<div class="test"></div>

/*css*/
.test {
     transform: translateY(0);
     transition: transform 0.5s;
 }

.test:hover{
     transform: translateY(-10px);
 }
赞(19) 打赏
未经允许不得转载:大前端 » chrome transition闪烁BUG
分享到: 更多 (0)

评论 2

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
  1. #2

    用这个方法写出来的在safari浏览器中会闪烁,求解
    .box{
    position: relative;
    left: 10px;
    width: 20px;
    height: 30px;
    background: red;
    transform: translateY(30px);
    transition: transform 2s linear;
    -webkit-transform:translateY(30px);
    -webkit-transition:-webkit-transform 2s linear;
    }
    .box:hover{
    transform: translateY(0);
    -webkit-transform:translateY(0);
    }

    橘橙夏日2周前 (04-10)回复
  2. #1

    position用于布局,transform用于变化(动画)

    nn3周前 (04-04)回复

themebetter 国内更好的WordPress主题服务商

立即前往

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏