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

내 페이지에 문제가있는 것 같습니다 : 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
}

Safari 8.0.2에서 이미지의 불투명도가 전환되면서 흔들리는 비슷한 문제가 발생했습니다. 여기에 게시 된 수정 사항 중 어느 것도 작동하지 않았지만 다음은 작동했습니다.

-webkit-transform: translateZ(0);

에 대한 모든 신용 이 답변 을 통해 이 이후의 대답

이 문제는 각 이미지가 display : inline-block 선언 된에 중첩 된 그리드의 이미지로 발생했습니다. Jamland가 위에 게시 한 솔루션은 다음과 같은 디스플레이가 inline-block; 부모 요소에 선언되었습니다.

이미지가 정렬되지 않은 목록에있는 또 다른 그리드가 있었고 display : block; 및 부모 목록 항목의 너비 및 선언 된 backface-visibility : hidden; 이미지 요소에 있고 마우스 오버시 위치 이동이없는 것 같습니다.

li { width: 33.33333333%; display: block; }
li img { backface-visibility: hidden; }

솔루션 alpipego 는이 문제에서 나에게 제공되었습니다. -webkit-backface-visibility: hidden; 이 이미지와 함께 사용 하면 호버 불투명도 전환에서 움직임이 없습니다.

/* fix error hover image opacity*/
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-ms-backface-visibility: hidden;
backface-visibility: hidden;

다른 모든 것을 깨뜨릴 수있는 CSS 변경이 필요하기 때문에 여기에있는 다른 모든 솔루션에 문제가있었습니다. position : relative를 사용하려면 요소를 배치하는 방법을 완전히 재고해야합니다. transform : rotate (0)은 기존 요소를 방해 할 수 있습니다. 전환 기간이 설정되어있을 때 변환하고 약간의 전환 효과를 제공하며 실제로 뒷면이 필요한 경우 (그리고 많은 접두사가 필요하면 뒷면 가시성이 작동하지 않습니다.)

내가 찾은 가장 게으른 해결책은 내 요소에 불투명도를 설정하는 것입니다. 이는 1에 매우 가깝지만 매우 가깝지는 않습니다. 불투명도가 1 인 경우에만 문제가되므로 다른 스타일을 중단하거나 방해하지 않습니다.

opacity:0.99999999;

Rick Giner의 답변을 올바른 것으로 표시 한 후 문제가 해결되지 않았다는 것을 알았습니다.

제 경우에는 max-width div 내에 반응 형 너비 이미지가 포함되어 있습니다. 사이트 너비가 해당 최대 너비를 넘으면 이미지가 마우스 오버시 이동합니다 (css 변환 사용).

제 경우의 수정은이 경우 최대 너비를 3, 3의 배수로 수정하는 것이었고 완벽하게 고정되었습니다.

CSS에 불투명도가 포함되어있는 것으로 나타났습니다. 나는 크롬과 똑같은 문제를 가지고 있었다. (마우스 오버시 움직이는 이미지) .. 내가 한 모든 것은 불투명도를 비활성화하는 것이었고 해결되었고 더 이상 이미지가 움직이지 않았다.

.yourclass:hover {
  /* opacity: 0.6; */
}

같은 문제가 있었지만 내 수정은 img 탭의 src 앞에 클래스를 넣는 것입니다.