当在事件上添加隐藏溢出时，CSS转换在FF中不起作用

Question

I have some problem with overflow hidden and CSS transitions. 我有一些溢出隐藏和CSS转换的问题。 The transition animation works fine until code is added to set overflow: hidden on the <body> element. 过渡动画工作正常，直到添加代码设置overflow: hidden在<body>元素上。 If that happens, the transition animation does not work; 如果发生这种情况，过渡动画不起作用; the element just changes immediately. 元素立即改变。

Look this example, please: http://jsfiddle.net/Lg3q911b/2/ 看看这个例子，请： http ： //jsfiddle.net/Lg3q911b/2/

CSS: CSS：

#block {
    background: red;
    float: left;
    overflow: hidden;
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 203px;
    height: 100%;
    transition: all 0.4s;
    transform: translate3d(-203px, 0, 0) scale3d(1, 1, 1);
}

#block.is-opened {
    transform: translate3d(0, 0, 0) scale3d(1, 1, 1);
}

HTML: HTML：

<div id="block"></div>
<a href="#" id="toggle">Toggle</a>

jQuery: jQuery的：

$(document).ready(function() {
    $('#toggle').on('click', function() {
       $('#block').addClass('is-opened');
        $('body').css('overflow', 'hidden');
    });
});

If the line that adds the overflow setting to the <body> is commented out, the animation works. 如果将添加overflow设置的行注释掉<body> ，则动画将起作用。

Maybe somebody know, how to fix it? 也许有人知道，如何解决它？

Answer 1

It's a bug, which has already been fixed for upcoming versions. 这是一个错误，已经为即将推出的版本修复了。

I can reproduce your problem using Firefox 32. 我可以使用Firefox 32重现您的问题。

However, on Firefox Nightly 35, it works well. 但是，在Firefox Nightly 35上，它运行良好。

当在事件上添加隐藏溢出时，CSS转换在FF中不起作用

问题描述

1 个解决方案

解决方案1
3 已采纳 2014-09-04 13:31:30

当在事件上添加隐藏溢出时，CSS转换在FF中不起作用

问题描述

1 个解决方案

解决方案1 3 已采纳 2014-09-04 13:31:30

解决方案1
3 已采纳 2014-09-04 13:31:30