css - WebKit 浏览器中基于 Em 的测量和不稳定的 CSS 转换

Question

我正在尝试做一些方便在 EM 中指定坐标和转换 font-size 以不同大小显示我的内容(这是一种基于 block 的图形的东西) .

这是一个说明问题的 jsfiddle。在 Firefox 中很好，在 IE 中没有转换(这很好)，但在 Safari 和 Chrome 中它做了一个疯狂的生涩的事情。

http://jsfiddle.net/6pf3D/2/

html:

<div class="parent">
    <div class="child">
    </div>
</div>​

CSS:

.parent{
    -webkit-transition: all;
    -webkit-transition-duration: 10s;
    background-color: rgba(0,255,0,0.3);
    font-size:16px;
    width:16em;
    height:16em;
}
.child{
    background-color: rgba(255,0,0,0.3);
    width: 8em;
    height:8em;
}

JavaScript:

$('.parent').css('font-size', '32px');

有人知道如何在不牺牲基于 em 的坐标的情况下实现平滑过渡吗？

Answer 1

这里我做了一个新的1，试试吧

Demo (2 秒间隔)

Demo 2 (10 秒间隔)

CSS

.parent{
    background-color: rgba(0,255,0,0.3);
    font-size:16px;
    width:16em;
    height:16em;
    transition: width 10s, height 10s;
    -moz-transition: width 10s, height 10s;
    -webkit-transition: width 10s, height 10s;
    -o-transition: width 10s, height 10s;
}

.child{
    background-color: rgba(255,0,0,0.3);
    width: 8em;
    height:8em;
    transition: width 10s, height 10s;
    -moz-transition: width 10s, height 10s;
    -webkit-transition: width 10s, height 10s;
    -o-transition: width 10s, height 10s;
}