火狐浏览器中的CSS动画Bug

Question

火狐浏览器中的CSS动画Bug

csscss-animations

6

我有一个网站上的CSS动画，用于给按钮添加悬停效果。

在Chrome和IE中，它看起来很好，但在Firefox中，我遇到了一个丑陋的问题。

悬停后仍有一些白色部分残留。

动画CSS：

.Hotel:hover{
   animation-name: pulse;
   animation-duration: 1s;
 }


@-webkit-keyframes pulse {
  from {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }

  50% {
    -webkit-transform: scale3d(100.10, 10.10, 10.10);
    transform: scale3d(100.10, 10.10, 10.10);
  }

  to {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}

@keyframes pulse {
  from {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }

  50% {
    -webkit-transform: scale3d(1.80, 1.80, 1.80);
    transform: scale3d(1.80, 1.80, 1.80);
  }

  to {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}

- Felix

刚在Mac上的Firefox和Firefox Dev-Edition上测试了一下，看起来没问题。这个问题在Windows上也出现了吗？如果是，你的Firefox版本是多少？ - nils

Firefox 46在Ubuntu上看起来也很好。 - raduken

yes on windows FF: 45.0.2 - Felix

1

由于渲染，出现了一些硬件加速问题。 - codefreaK

1

你尝试过激活“选项>常规>浏览>可用时使用硬件加速”吗？在过去，这给我带来了真正的头疼，绘制字体和边框。 - I.G. Pascual

显示剩余4条评论

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- codefreaK · Accepted Answer

一切看起来都很正常，可能是由于硬件加速设置未开启导致的。

打开“当可用时使用硬件加速”选项。

目前，像Chrome、FireFox、Safari、IE9+和最新版本的Opera这样的浏览器都配备了硬件加速；它们只会在有迹象表明DOM元素会受益时才使用它。在CSS中，最强烈的迹象是对一个元素应用了3D变换。既然你已经这样做了，那么除了开启硬件加速之外，似乎没有什么问题，我的浏览器里也很正常。

在Chrome和Safari中，使用CSS变换或动画时可能会出现闪烁效果。可以使用以下声明来解决此问题：

.className{
   -webkit-backface-visibility: hidden;
   -moz-backface-visibility: hidden;

   backface-visibility: hidden;

   -webkit-perspective: 1000;
   -moz-perspective: 1000;
   perspective: 1000;
   /* Other transform properties here */
}

另一种在使用WebKit引擎的桌面和移动浏览器中表现良好的方法是使用translate3d：

.className{
   -webkit-transform: translate3d(0, 0, 0);
   -moz-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  /* Other transform properties here */
}

原生移动应用也很好地利用了设备的 GPU——这就是为什么它们被认为比 Web 应用程序表现略好。在移动设备上使用硬件加速可以特别有用，因为它有助于减少设备资源的消耗。