마우스 오버 시 이미지 이동: Chrome의 불투명도 문제 해결

사용자는 마우스 오버 시 이미지가 약간 오른쪽으로 이동하는 문제를 신고했습니다. 하지만 Chrome에서만 가능합니다. 이 문제는 이미지의 투명도를 제어하기 위해 불투명도를 사용하는 데서 발생합니다.

CSS 검사

문제를 조사하기 위해 제공된 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;
}

문제 해결

대체 솔루션은 불투명도가 있는 hover 요소에 -webkit-backface-visibility 속성을 활용하는 것입니다. 이 속성은 변환 시 요소의 뒷면이 렌더링되는 방식에 영향을 줍니다. 이 경우 Chrome의 불투명도 변경으로 인해 발생하는 의도하지 않은 움직임을 해결합니다.

호버 상태에 다음 속성을 적용합니다.

-webkit-backface-visibility: hidden;

추가 고려 사항

-webkit-backface-visibility 속성은 WebKit 브라우저에만 해당되므로 다른 엔진의 경우 공급업체 접두사가 필요할 수 있습니다. 보다 포괄적인 정보는 CSS-Tricks 문서를 참조하세요.