转场在 Safari 中被窃听答案

【问题标题】：The transitions are bugged in Safari转场在 Safari 中被窃听
【发布时间】：2014-06-27 20:10:13
【问题描述】：

我发现了一个奇怪的错误。我需要在一个盒子上制作一个过渡宽度/高度，我需要这个盒子是绝对的和内联块。这适用于除 safari 之外的所有浏览器。

HTML：

<div id="block">
SOME TEXT
</div>

CSS：

#block {
    height: 200px;
    width: 200px;
    background-color: yellow;
    -moz-transition: 0.6s all;
    -webkit-transition: 0.6s all;
    -o-transition: 0.6s all;
    transition: 0.6s all;
    display: inline-block;
}

#block:hover {
    height: 400px;
    width: 400px;
    background-color: blue;
    position: absolute;
}

inline-block + absolute 的组合使过渡在 safari 中不起作用。谁知道怎么修它？谢谢。

【问题讨论】：

Firefox 也有类似的错误。如果要转换，则不能更改位置属性。
“越野车”是什么意思？你需要更具体。
没有过渡。变化立即发生
将 position 属性添加到未悬停状态。然后它工作正常 - jsfiddle.net/575FE/6
@3rror404 这对我来说很好，适用于 IE11、FF30、chrome35。

标签： html safari css-transitions css

【解决方案1】：

从#block:hover中删除position:absolute

Updated DEMO

#block:hover {
    height: 400px;
    width: 400px;
    background-color: blue;
}

【讨论】：

“我需要这个盒子是绝对的和内联块” - OP