火狐 CSS3 在带有溢出隐藏元素的元素上翻译消失



我有一个DOM元素,我将X()转换为某个新位置。

在 Firefox 中,一旦翻译发生,这个元素就会消失。经过大量调试,似乎只有当通过某些操作将翻译动态应用于元素时,在元素最初呈现之后(如果 css 从页面加载中存在,则不会发生这种情况),并且仅当 translateX 值大于元素宽度时,才会发生这种情况!此外,仅当 dom 元素具有"溢出:隐藏"时,才会发生这种情况。

所以,如果我有一个 200px 的盒子:

#box { width: 200px; overflow: hidden; }

如果我转换为 199px,它可以完美运行:

$('#box').css('transform', 'translateX(199px)')

但是如果我转换为 200px,盒子会移动到新位置,然后一秒钟后它消失了

$('#box').css('transform', 'translateX(200px)')

这是一个jsfiddle:http://jsfiddle.net/vtkmZ/3/

  • 仅限火狐
  • 浏览器
  • 仅当 dom 元素有溢出:隐藏
  • 仅当在首次渲染后动态应用转换时
  • 仅当 translateX() 值大于元素宽度时

这种情况始终如一地发生。关于为什么会发生这种情况的任何想法,以及任何解决方法?我无法在网上找到任何东西。这是一个已知的错误吗?

它与

错误944291 - 从 Firefox 25 开始,在应用 css 转换 + 动画的情况下裁剪元素

并且它一直固定到版本 29。

最新更新