hình ảnh di chuyển khi di chuột - vấn đề về độ mờ của chrome

Có vẻ như có vấn đề với trang của tôi ở đây: http://www.lonewulf.eu

Khi di chuột qua các hình thu nhỏ, hình ảnh sẽ di chuyển một chút về bên phải và điều này chỉ xảy ra trên Chrome.

Css của tôi:

.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;
}

Một giải pháp khác sẽ là sử dụng

-webkit-backface-visibility: hidden;

trên phần tử di chuột có độ mờ. Khả năng hiển thị mặt sau liên quan đến transform, vì vậy @Beskow 's có một cái gì đó để làm với nó. Vì đây là một vấn đề cụ thể của bộ web nên bạn chỉ cần xác định khả năng hiển thị mặt sau cho bộ web. Có các tiền tố nhà cung cấp khác .

Xem http://css-tricks.com/almanac/properties/b/backface-visibility/ để biết thêm thông tin.

Vì một số lý do, Chrome diễn giải vị trí của các phần tử không có độ mờ là 1 theo một cách khác. Nếu bạn áp dụng thuộc tính CSS position:relativecho các phần tử a.img của mình thì sẽ không còn chuyển động trái / phải nữa vì độ mờ của chúng thay đổi.

Tôi đã gặp vấn đề tương tự, tôi đã sửa nó bằng cách xoay chuyển đổi css. Như thế này:

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

Nó hoạt động tốt trong các trình duyệt chính.

Một giải pháp khác đã khắc phục sự cố này cho tôi là thêm quy tắc:

will-change: opacity;

Trong trường hợp cụ thể của tôi, điều này đã tránh được sự cố nhảy pixel tương tự đã translateZ(0)xuất hiện trong Internet Explorer, mặc dù đã sửa mọi thứ trong Chrome.

Hầu hết các giải pháp khác đề xuất ở đây có liên quan đến biến đổi (ví dụ. translateZ(0), rotate(0), translate3d(0px,0px,0px), Vv) làm việc bằng bàn vẽ của nguyên tố này giao cho GPU, cho phép dựng hình hiệu quả hơn. will-changecung cấp một gợi ý cho trình duyệt có lẽ có hiệu ứng tương tự (cho phép trình duyệt hiển thị quá trình chuyển đổi hiệu quả hơn), nhưng cảm thấy ít hack hơn (vì nó giải quyết vấn đề một cách rõ ràng thay vì chỉ thúc đẩy trình duyệt sử dụng GPU).

Phải nói rằng, cần lưu ý rằng hỗ trợ trình duyệt không tốt will-change(mặc dù nếu vấn đề chỉ xảy ra với Chrome thì đây có thể là một điều tốt!) Và trong một số tình huống, nó có thể tự gây ra các vấn đề , nhưng vẫn , đó là một giải pháp khả thi khác cho vấn đề này.

Tôi cần áp dụng cả hai backface-visibilityvà transformcác quy tắc để ngăn chặn sự cố này. Như thế này:

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

Tôi đã gặp sự cố tương tự với các bộ lọc (không độ mờ) khi di chuột. Đã sửa bằng cách thêm quy tắc vào lớp cơ sở với:

filter: brightness(1.01);

khả năng hiển thị mặt sau (hoặc -webkit-khả năng hiển thị mặt sau) chỉ khắc phục sự cố trong Chrome cho tôi. Để khắc phục trong cả Firefox và Chrome, tôi đã sử dụng kết hợp các câu trả lời ở trên sau đây.

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

Tôi đã gặp sự cố tương tự trong Safari 8.0.2, nơi hình ảnh sẽ bị rung khi độ mờ của chúng chuyển đổi. Không có bản sửa lỗi nào được đăng ở đây hoạt động, tuy nhiên, cách sau đã làm:

-webkit-transform: translateZ(0);

Tất cả tín dụng cho câu trả lời này thông qua câu trả lời tiếp theo này

Tôi gặp phải vấn đề này với các hình ảnh trong một lưới, mỗi hình ảnh được lồng trong một khối đã khai báo display: inline-block. Giải pháp mà Jamland đã đăng ở trên đã hoạt động để khắc phục sự cố khi hiển thị: inline-block; đã được khai báo trên phần tử cha.

Tôi có một lưới khác nơi các hình ảnh nằm trong danh sách không có thứ tự và tôi có thể chỉ khai báo display: block; và chiều rộng trên mục danh sách mẹ và khai báo backface -ibility: hidden; trên phần tử hình ảnh và dường như không có bất kỳ sự thay đổi vị trí nào khi di chuột.

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

Giải pháp alpipego đã được phục vụ cho tôi trong vấn đề này. Sử dụng -webkit-backface-visibility: hidden; Với điều này, hình ảnh không di chuyển trong quá trình chuyển đổi độ mờ khi di chuột

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

Tôi đã gặp sự cố với tất cả các giải pháp khác ở đây, vì chúng yêu cầu những thay đổi đối với CSS có thể phá vỡ những thứ khác - vị trí: tương đối yêu cầu tôi suy nghĩ lại hoàn toàn về cách tôi định vị các phần tử của mình, biến đổi: xoay (0) có thể can thiệp vào chuyển đổi và tạo ra các hiệu ứng chuyển tiếp nhỏ khi tôi đặt thời lượng chuyển tiếp và khả năng hiển thị mặt sau sẽ không hoạt động nếu tôi thực sự cần một mặt sau (và yêu cầu rất nhiều tiền tố.)

Giải pháp lười nhất mà tôi tìm thấy là chỉ đặt độ mờ trên phần tử của tôi rất gần nhưng không hoàn toàn là 1. Đây chỉ là vấn đề nếu độ mờ là 1, vì vậy nó sẽ không phá vỡ hoặc can thiệp vào bất kỳ kiểu nào khác của tôi:

opacity:0.99999999;

Sau khi đánh dấu câu trả lời của Rick Giner là đúng, sau đó tôi phát hiện ra rằng nó không giải quyết được vấn đề.

Trong trường hợp của tôi, tôi có các hình ảnh có chiều rộng đáp ứng nằm trong một div có chiều rộng tối đa. Khi chiều rộng trang web vượt qua chiều rộng tối đa đó, hình ảnh sẽ di chuyển khi di chuột (sử dụng biến đổi css).

Cách khắc phục trong trường hợp của tôi là chỉ cần sửa đổi chiều rộng tối đa thành bội số của ba, ba cột trong trường hợp này và nó đã sửa nó một cách hoàn hảo.

Tôi nhận thấy bạn có độ mờ bao gồm trong CSS của bạn. Tôi đã gặp vấn đề chính xác tương tự với Chrome (hình ảnh di chuyển khi di chuột) .. tất cả những gì tôi làm là vô hiệu hóa độ mờ và nó đã được giải quyết, không còn hình ảnh di chuyển nữa.

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

Gặp vấn đề tương tự, bản sửa lỗi của tôi là đặt lớp trước src trong tab img.