问题描述
我今天遇到了一个问题,它花了我很长时间调试,我找不到一个解决方案在任何地方在线,所以我认为这将是有用的文档
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这个
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!
推荐答案
这看起来像给我:父对象的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转换破坏的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!