Chrome에서 1px 이동을 일으키는 CSS3 변환 회전

Chrome에서 1px 이동을 일으키는 CSS3 변환 회전

---

크롬에서 CSS3 변환 회전 전환에 문제가 있습니다. 전환이 잘 작동하지만 완료 직후 요소가 픽셀 단위로 이동합니다. 또 다른 이상한 점은 페이지가 중앙에있을 때만 발생한다는 것입니다 ( margin:0 auto;). 전환을 제거해도 버그는 여전히 존재합니다.

여기서 발생하는 것을 볼 수 있습니다.

http://jsfiddle.net/MfUMd/1/

HTML :

<div class="wrap">
    <img src="https://github.com/favicon.ico" class="target" alt="img"/>
</div>

<div class="wrap">
    <div class="block"></div>
</div>

CSS :

.wrap {
    margin:50px auto;
    width: 100px;
}
.block {
    width:30px;
    height:30px;
    background:black;
}
.target,.block {
    display:block;
    -webkit-transition: all 0.4s ease;
    -moz-transition: all 0.4s ease;
    -o-transition: all 0.4s ease;
    transition: all 0.4s ease;
}
.target:hover,.block:hover {
    -webkit-transform: rotate(90deg); 
    -moz-transform: rotate(90deg); 
    -o-transform: rotate(90deg);
    -ms-transform: rotate(90deg);  
}

margin:0 auto;줄을 주석 처리하여 제거하십시오.

누구든지 페이지를 중앙에 유지하면서 이것을 중지하는 방법에 대한 아이디어가 있습니까?

OSX 10.6.8에서 버전 24.0.1312.57을 사용하고 있습니다.

건배

---

실제로 모든 요소를 ​​포함하는 사이트 컨테이너에 이것을 추가하십시오. -webkit-backface-visibility: hidden;

고쳐야합니다!

지노

---

동일한 문제가 발생하여 전환을 사용하는 div의 CSS에 다음을 추가하여 해결했습니다.

-webkit-backface-visibility: hidden;
-webkit-transform: translateZ(0) scale(1.0, 1.0);

뒷면은 3D 기반 전환에 사용되지만 2D 만 사용하는 경우 추가 항목이 필요하지 않습니다.

---

신체 차원과 변환 구조 사이의 관계에 특이한 것이 있습니다. 사실 코드 미리보기가 포함 된 바이올린 iframe 때문이 아닙니다.

어쨌든 대신이 방법을 제안하겠습니다.

body{
  width:100%;
  float:left;
}

.wrap {
  margin: 50px 45%;
  width: 5%;
  float: left;
}
.block {
  width:30px;
  height:30px;
  background:black;
}
.target,.block {
  -webkit-transition: all 0.4s ease;
  -moz-transition: all 0.4s ease;
-o-transition: all 0.4s ease;
transition: all 0.4s ease;
}
.target:hover,.block:hover {
-webkit-transform: rotate(90deg); 
    -moz-transform: rotate(90deg); 
    -o-transform: rotate(90deg);
    -ms-transform: rotate(90deg);  
}

다음은 업데이트 된 바이올린입니다.

참조 URL : https://stackoverflow.com/questions/14729492/css3-transform-rotate-causing-1px-shift-in-chrome