css从auto转换到任何高度,在safari中行为非常不一致

时间:2015-08-13 21:29:27

标签: javascript html css css3 safari

在Chrome中,如果您设置了转场高度,并且从auto转到某个值,或从值转到auto,它将不会应用转换,它会直接转换为值你只是设置好像你没有过渡设置。我没有查过,我怀疑这是CSS规范的漏洞。它很糟糕,但我可以通过巧妙地手动计算高度和应用手法来解决过渡失败的问题。

所以是的,我有一堆复杂的UI代码可以做出这个假设,因为没有其他方法可以实现某些流畅的UI交互。

然后Safari在最近几个月的某个时刻介入,并且完全偏向错误的方向偏离了这种行为。一个总的猴子扳手折腾,这一个。

如果您从auto转到某个值,它会转到0,然后转换为该值。

如果您从某个值转到auto,它会转换为0,然后变为自动值。

现在.......我可能只是在这里有点疯狂,但我很确定几个月前这不是Safari的表现。

我在OS X Yosemite 10.10.4上的Safari版本8.0.7上。

我的问题是 - 是否有一些其他CSS值可以用来恢复正常(仍然不是很理智,但比这个更健全)行为?

我不是在寻找解决方法或任何此类方法的帮助。我已经可以想到几个。我主要是出于引入新的浏览器碎片引起的挫败感。

1 个答案:

答案 0 :(得分:0)

这是Safari过于乐于助人。

这个黑客最初为你工作的原因是CSS无法过渡到非数字值或从非数字值过渡,因为它无法计算。

然而,Safari预计,如果您不想要它,您知道,过渡,您将无法转换元素。因此,他们在转换之前有用地将一个默认值应用于元素:auto。

如果您不希望转换,可以尝试inheritnone或任何其他数量的非数字 - 但有效! - CSS值(尽管这些值很可能会被默认为一个数字,无论是继承值还是0)。

更好的选择是在您不想实际转换的项目上设置transition: none

所以我知道您不想要解决方法,但是对那些您不想过渡的元素设置transition: none并不是一种解决方法。这只是CSS的正确行为。