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

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

---

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

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

---

I ran into this issue with images in a grid each image was nested in an that had display: inline-block declared. The solution that Jamland posted above worked to correct the issue when the display: inline-block; was declare on the parent element.

I had another grid where the images were in an unordered list and I was able to just declared display: block; and a width on the parent list item and declared backface-visibility: hidden; on the image element and there doesn't seem to be any position shift on hover.

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

---

The solution alpipego was served me in this problem. Use -webkit-backface-visibility: hidden; With this the image no move in hover opacity transition

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

---

I had trouble with all the other solutions here, as they require changes to the CSS that may break other things -- position:relative requires me to completely rethink how I'm positioning my elements, transform:rotate(0) can interfere with existing transforms and gives wonky little transition effects when I have a transition-duration set, and backface-visibility won't work if I ever actually need a backface (and requires a whole lot of prefixing.)

The laziest solution I found is to just set an opacity on my element which is very close to, but not quite, 1. This is only a problem if opacity's 1, so it's not going to break or interfere with any of my other styles:

opacity:0.99999999;

---

Having marked Rick Giner's answer as correct I then found out it did not fix the issue.

In my case I have responsive width images contained within a max-width div. Once the site width crosses that max width the images move on hover (using css transform).

The fix in my case was to simply amend the max width to a multiple of three, three columns in this case, and it fixed it perfectly.

---

I noticed you had opacity included in your CSS. I had the same exact issue with Chrome (the image moving on hover) .. all I did was disable the opacity and it was solved, no more images moving.

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

---

Had the same issue, My fix was putting the class before the src in the img tab.

참고URL : https://stackoverflow.com/questions/12980153/image-moves-on-hover-chrome-opacity-issue