firefox css3翻译元素溢出隐藏元素消失

时间:2013-10-14 14:01:50

标签: css3 firefox transform

我有一个DOM元素,我将X()翻译成一个新位置。

在Firefox中,只要翻译发生,此元素就会消失。经过大量的调试后,似乎只有在最初渲染元素之后通过某种动作动态地将转换应用于元素时才会发生这种情况(如果css是从页面加载那里就不会发生)并且只有当translateX值是大于元素宽度!这也只有在dom元素具有“overflow:hidden”时才会发生。

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

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

如果我翻译为199px,它的效果非常好:

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

但是如果我翻译成200px,那么盒子会移动到新的位置,然后一秒钟就会消失

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

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

  • 仅限Firefox
  • 仅当dom元素有溢出时:隐藏
  • 仅在第一次渲染后动态应用翻译
  • 仅当translateX()值大于元素宽度

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

1 个答案:

答案 0 :(得分:0)