[css] 마우스 오버시 이미지 이동-크롬 불투명도 문제

Program / 글쓴이

내 페이지에 문제가있는 것 같습니다 :
http://www.lonewulf.eu

미리보기 이미지 위로 마우스를 가져 가면 이미지가 오른쪽으로 약간 이동하며 Chrome에서만 발생합니다.

내 CSS :

.img{
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
    filter:alpha(opacity=50);
    -moz-opacity: 0.5; 
    opacity: 0.5;
    -khtml-opacity: 0.5;
    display:block;
    border:1px solid #121212;
}
.img:hover{
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    filter:alpha(opacity=100);
    -moz-opacity: 1; 
    opacity: 1;
    -khtml-opacity: 1;  
    display:block;
}

답변

또 다른 해결책은 

-webkit-backface-visibility: hidden;

불투명도를 가진 호버 요소에. 뒷면 가시성 은와 관련이 transform있으므로 @Beskow 는 그것과 관련이 있습니다. 웹킷에 특정한 문제이므로 웹킷에 대한 뒷면 가시성을 지정하기 만하면됩니다. 다른 공급 업체 접두사가 있습니다.

자세한 내용은 http://css-tricks.com/almanac/properties/b/backface-visibility/ 를 참조 하십시오 .

답변

어떤 이유로 Chrome은 불투명도가 1이 아닌 요소의 위치를 ​​다른 방식으로 해석합니다. position:relativea.img 요소에 CSS 속성 을 적용하면 불투명도가 달라 지므로 더 이상 왼쪽 / 오른쪽 이동이 없습니다.

답변

나는 같은 문제가 있었고 CSS 변환 회전으로 수정했습니다. 이렇게 :

-webkit-transform: rotate(0);
-moz-transform: rotate(0);
transform: rotate(0);

주요 브라우저에서 잘 작동합니다.

답변

이 문제를 해결 한 또 다른 해결책은 규칙을 추가하는 것입니다.

will-change: opacity;

필자의 경우 translateZ(0)Chrome에서 문제를 수정 했음에도 불구하고 Internet Explorer에 도입 된 유사한 픽셀 점프 문제를 피했습니다 .

다른 솔루션의 대부분은 변환 (예. 관련이 여기에 제안 translateZ(0), rotate(0), translate3d(0px,0px,0px)보다 효율적인 렌더링을 허용하는 GPU에 걸쳐 요소의 그림을 나눠로, 등) 작업을. will-change브라우저에 유사한 효과 (브라우저가 전환을 더 효율적으로 렌더링 할 수 있도록 허용)를 제공 할 수 있지만 덜 불안정한 느낌을주는 힌트를 제공합니다 (GPU를 사용하기 위해 브라우저를 살짝 누르는 것이 아니라 명시 적으로 문제를 해결하기 때문입니다).

하지만 브라우저 지원 이 그다지 좋지 않다는 점을 명심할 가치 will-change가 있습니다 (Chrome에만 문제가있는 경우 좋은 일이 될 수 있습니다!). 어떤 상황에서는 자체 문제가 발생할 수 있지만 여전히 ,이 문제에 대한 또 다른 가능한 해결책입니다.

답변

나는 모두를 적용 할 필요가 있었다 backface-visibility및 transform이 결함을 방지하기 위해 규칙. 이렇게 :

a     {-webkit-transform: rotate(0);}
a img {-webkit-backface-visibility: hidden;}

답변

마우스 오버시 (불투명하지 않은) 필터와 비슷한 문제가 발생했습니다. 다음을 사용하여 기본 클래스에 규칙을 추가하여 수정되었습니다.

filter: brightness(1.01);

답변

backface-visibility (또는 -webkit-backface-visibility)는 Chrome for me의 문제 만 해결했습니다. Firefox와 Chrome 모두에서 수정하기 위해 위의 답변을 다음 조합으로 사용했습니다.

//fixes image jiggle issue, please do not remove
img {
  -webkit-backface-visibility: hidden; //Webkit fix
  transform: translate3d(0px,0px,0px); //Firefox fix
}