Question

以下代码段是Firefox中出现错误的精简示例。如果translate x轴大于div的宽度，则过渡效果非常不稳定。在其他浏览器中测试过，在其他地方看起来很好。这也与overflow设置有某种联系，因为如果我删除它，它在Firefox中再次没问题。

我正在使用Firefox v57。任何人都知道造成这种情况的原因是什么？

div.wrapper {
  transform: translate(100px, 0px);
  overflow: hidden;
}
div.block {
  color: #fff;
  background-color: #d9534f;
  transition: background-color 0.3s ease-in-out;
  width: 100px;
  height: 100px;
}
div.block:hover {
  background-color: #c9302c;
}

<div class="wrapper">
  <div class="block"></div>
</div>

Answer 1

找到一种解决方法，避免将translate和overflow属性应用于同一元素，如下所示：

＆＃13;

div.wrapper {
  transform: translate(100px, 0px);
}

div.wrapper-container {
  overflow: hidden;
}

div.block {
  color: #fff;
  background-color: #d9534f;
  transition: background-color 0.3s ease-in-out;
  width: 100px;
  height: 100px;
}

div.block:hover {
  background-color: #c9302c;
}

＆＃13;

<div class="wrapper">
  <div class="wrapper-container">
    <div class="block"></div>
  </div>
</div>

＆＃13;

我的问题出现了，因为我使用Slidebars，即使在他们的网站上也可以观察到此处描述的问题。希望这个Q＆amp; A帮助一些可能遇到同样问题的人。

转换CSS转换会在Firefox中创建跳跃动画

1 个答案: