css - 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

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

演示（2 秒间隔）

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