FireFox에서 동기 CSS3 전환이 부드럽 지 않습니다.

Question

CSS3 전환을 사용하여 선택한 또는 마우스 오버 메뉴 효과를 만들려고합니다. 저는 border-left-width와 padding-left를 동시에 애니 메이팅함으로써이 작업을하고 있습니다. 국경은 6px 증가하고 패딩은 6px 감소하며 속도는 0.3s입니다.

Chrome에서는 둘 다 같은 속도로 움직이고 부드럽게 보입니다. IE에서 전환은 즉각적이며 (분명히 전환/애니메이션 없음) 좋을 것입니다. 파이어 폭스에서는 테두리와 패딩이 동시에 애니메이션으로 나타납니다.하지만 텍스트 나 컨테이너가 바뀌어서 고르지 않게 보입니다.

여기에 바이올린 예입니다 http://jsfiddle.net/crisp330/w7phH/1/ (FF와 크롬의 차이를 참조하십시오?)

어쨌든 거기에 파이어 폭스이 원활 크롬이하는 것처럼 애니메이션을 얻을? 저는 LI 내부에 다른 요소를 배치하고 애니메이션을 적용하는 것과 같은 대안을 사용할 수 있다는 것을 알고 있습니다. 그러나이 접근법은 sooo cleannnn입니다! 여기

(예를 작업을위한 jsFiddle 참조) CSS3 전환의 고기입니다 : 여기

ul li { 
    padding-left: 12px; 
    border: 0 none; 
} 

ul li:hover { 
    padding-left: 6px; 
    border-left: 6px solid #d17519; 
    transition: border-left-width .3s, padding-left .3s; 
    -moz-transition: border-left-width .3s, padding-left .3s; 
    -webkit-transition: border-left-width .3s, padding-left .3s; 
    -o-transition: border-left-width .3s, padding-left .3s; 
} 

Answer 1

당신의 진짜 문제는 파이어 폭스가 아닌 정수 픽셀 패딩 값 만 정수 장치 픽셀 경계 값 수 있다는 것입니다 (왜냐하면 웹 페이지는 정수 너비의 테두리에 의존하기 때문이다). Chrome은 둘 다 정수 픽셀 수를 사용하므로 문제가 해결됩니다. 지금은. 그들이 서브 픽셀 패딩을 시작할 때까지. 그러나 파이어 폭스에서는 경계가 반 정수보다 조금 작아서 반 정수보다 조금 더 많아지면 1-device-px로 바운스됩니다.

불행히도 여기에는 큰 해결책이 없습니다. WebKit의 접근 방법과 관련된 문제에 대한 설명은 http://robert.ocallahan.org/2008/01/subpixel-layout-and-rendering_22.html을 참조하십시오.