WebKit 브라우저의 Em 기반 측정 및 불규칙한 CSS 전환

Question

EM에서 좌표를 지정하고 font-size으로 전환하여 내 콘텐츠를 다양한 크기로 표시 할 수있는 무언가를 시도하고 있습니다 (일종의 블록 기반 그래픽 맡은 일).

다음은 문제를 설명하는 jsfiddle입니다. 파이어 폭스에서는 괜찮습니다. 인터넷 익스플로러 (IE는 괜찮습니다)는 없지만 사파리와 크롬에서는 이상한 점이 있습니다.

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

자바 스크립트 :

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

아무도 내가 원활한 전환을 얻을 수있는 방법을 알고 있나요 withou em- 기반 좌표를 희생시키지 않습니까? 여기

Answer 1

나는 새로운 일을했습니다,

Demo 2 (십초 간격)

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