当父溢出改变时，firefox转换破坏 [英] firefox transitions breaking when parent overflow is changed

问题描述

我今天遇到了一个问题，它花了我很长时间调试，我找不到一个解决方案在任何地方在线，所以我认为这将是有用的文档

i came across an issue today and it took me so long to debug, I couldn't find a solution anywhere online so I thought it would be useful to document

似乎如果父类的overflow属性与转换一起更改，转换在Firefox上不起作用 - 例如：

It seems that transitions do not work on Firefox if the parent's "overflow" property is changed together with the transition - ie:

.parent { overflow: hidden; }
.parent:hover { overflow: visible; }
.child { opacity: 1; transition: opacity 1s linear; }
.parent:hover .child { opacity: 0; }

转换将不会对子项起作用。从悬停的父代中删除overflow：visible属性，一切正常。看来，改变孩子本身的溢出不会导致任何问题，这是奇怪的。

The transitions will not work on the child. Remove the "overflow:visible" property from the hovered parent, and everything is ok. It seems that changing the overflow on the child itself does not cause any issues, which is weird.

这是一个js fiddle这个 http://jsfiddle.net/qzMj9/13/

Here's a js fiddle for this http://jsfiddle.net/qzMj9/13/

有人知道为什么这发生？是一个ff错误或正确的功能？

does anyone know why this happens? is it a ff bug or the correct functionality? it works on webkit!

推荐答案

这看起来像 https://bugzilla.mozilla.org/show_bug.cgi?id=625289 给我：父对象的CSS框被重建，丢失旧的计算风格对孩子，这意味着没有转换开始，因为这是由计算风格更改触发。

This looks like https://bugzilla.mozilla.org/show_bug.cgi?id=625289 to me: the parent is having its CSS boxes reconstructed, which loses the old computed style on the child, which means no transition start, since that's triggered by computed style changes.

这篇关于当父溢出改变时，firefox转换破坏的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！