css - firefox css3在溢出隐藏元素消失的元素上进行翻译

Question

我有一个 DOM 元素，我将其translateX() 到某个新位置。

在 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元素具有overflow:hidden
• 仅当第一次渲染后动态应用翻译时
• 仅当translateX()值大于元素宽度时

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

Answer 1

与此相关

Bug 944291 - Cropping of element with css transform + animation applied, starting in Firefox 25

并且在版本 29 之前已修复。