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

Question

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

这是一个说明问题的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

我在这里做了一个新的尝试

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;
}