Firefox CSS transitions with body overflow:hidden

Firefox CSS transitions with body overflow:hidden

本文关键字：overflow hidden body with CSS transitions Firefox      更新时间：2023-09-26

CSS 转换在 FireFox 中通过 JavaScript 将overflow: hidden添加到<body>标签时停止工作。(至少在运行在 OSX10.9.5 上的 FF32.0.3 上(

通过 JavaScript 添加溢出时，CSS 转换不会触发：

http://jsfiddle.net/8rc7kk28/2/

在不添加溢出的情况下，CSS 过渡工作正常：

http://jsfiddle.net/8rc7kk28/3/

如何使第一个示例正常工作？我需要维护<body>标签上的overflow: hidden。

找到了解决方法：

http://jsfiddle.net/8rc7kk28/4/

  • 立即应用overflow: hidden规则。
  • 通过 setTimeout 引入小延迟。
  • 延迟后添加触发 CSS 转换的类。
相关文章：