obraz porusza się po najechaniu-problem z nieprzezroczystością chrome

Z jakiegoś powodu Chrome inaczej interpretuje położenie elementów bez krycia 1. Jeśli zastosujesz atrybut CSS position:relative do swoich elementów a. img, nie będzie więcej ruchu w lewo/prawo, ponieważ ich krycie się zmienia.

Miałem ten sam problem, naprawiłem go za pomocą CSS transform rotate. Tak:

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

Działa dobrze w głównych przeglądarkach.

Musiałem zastosować zarówno backface-visibility jak i transform Zasady, aby zapobiec tej usterce. Tak:

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

Miałem podobny problem z filtrami (bez nieprzezroczystości) po najechaniu na kursor. Fixed by adding a rule to the base class with:

filter: brightness(1.01);

Innym rozwiązaniem, które naprawiło ten problem dla mnie było dodanie reguły:

will-change: opacity;

W moim konkretnym przypadku uniknęło to podobnego problemu przeskakiwania pikseli, który translateZ(0) wprowadził w Internet Explorerze, pomimo naprawiania rzeczy w Chrome.

Większość innych rozwiązań sugerowanych tutaj, które dotyczą przekształceń (np. translateZ(0), rotate(0), translate3d(0px,0px,0px), etc) poprzez przekazanie malowania elementu do GPU, co pozwala na bardziej wydajne renderowanie. will-change daje podpowiedź do przeglądarki, która ma przypuszczalnie podobny efekt (pozwalając przeglądarce na bardziej wydajne renderowanie przejścia), ale wydaje się mniej hakerski(ponieważ wyraźnie rozwiązuje problem, a nie tylko popycha przeglądarkę do korzystania z GPU).

Mimo to, warto pamiętać, że obsługa przeglądarki nie jest tak dobra dla will-change (choć jeśli problem dotyczy tylko Chrome, to może to być dobra rzecz!), a w niektórych sytuacjach może wprowadzać własne problemy , ale i tak jest to kolejna możliwa rozwiązanie tego problemu.

Backface-visibility (lub-webkit-backface-visibility) Naprawiono tylko problem w Chrome dla mnie. Aby naprawić zarówno Firefox i Chrome użyłem poniższej kombinacji powyższych odpowiedzi.

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

Spotkałem się z podobnym problemem w Safari 8.0.2, gdzie obrazy jitter jak ich krycie przejścia. Żadna z zamieszczonych tu poprawek nie zadziałała, jednak poniższe:

-webkit-transform: translateZ(0);

Wszystkie podziękowania dla Ta odpowiedź via ta kolejna odpowiedź

Napotkałem problem z obrazami w siatce każdy obraz był zagnieżdżony w bloku, który miał zadeklarowany display: inline-block. Rozwiązanie, które Jamland opublikował powyżej, poprawiło problem, gdy display: inline-block; był deklarowany na elemencie nadrzędnym.

Miałem inną siatkę, gdzie obrazy były na liście nieuporządkowanej i byłem w stanie zadeklarować display: block; i szerokość na elemencie listy nadrzędnej i zadeklarowane backface-visibility: hidden; na elemencie obrazu i nie wydaje się aby być dowolną zmianą pozycji na hover.

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

Rozwiązanie alpipego zostało mi podane w tym problemie. Use -webkit-backface-visibility: hidden; W ten sposób obraz nie porusza się w przejściu nieprzezroczystości najazdu

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

Miałem problem ze wszystkimi innymi rozwiązaniami, ponieważ wymagają one zmian w CSS, które mogą zepsuć inne rzeczy -- position: relative wymaga ode mnie całkowitego przemyślenia sposobu pozycjonowania moich elementów, transform: rotate (0) może zakłócać istniejące transformacje i daje małe efekty przejścia, gdy mam zestaw czasu przejścia, a widoczność backface nie będzie działać, jeśli kiedykolwiek będę potrzebował backface (i wymaga dużo prefiksu.)

Najbardziej leniwe rozwiązanie jakie znalazłem jest po prostu ustawić nieprzezroczystość na moim elemencie, który jest bardzo blisko, ale nie do końca, 1. Jest to tylko problem, jeśli nieprzezroczystość jest 1, więc nie złamie się ani nie zakłóci żadnego z moich innych stylów:

opacity:0.99999999;

Po zaznaczeniu odpowiedzi Ricka Ginera jako poprawnej, dowiedziałem się, że nie Naprawiono problemu.

W moim przypadku mam responsywne obrazy szerokości zawarte w div max-width. Gdy szerokość witryny przekroczy maksymalną szerokość, obrazy przesuwają się po najechaniu kursorem (za pomocą transform css).

Poprawka w moim przypadku polegała na prostym dostosowaniu maksymalnej szerokości do wielokrotności trzech, trzech kolumn w tym przypadku i naprawiła to doskonale.

Zauważyłem, że masz krycie zawarte w CSS. Miałem dokładnie ten sam problem z Chrome (obraz porusza się na hover).. wszystko, co zrobiłem, to wyłączyć krycie i zostało rozwiązane, nie więcej obrazów ruchomych.

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

Miał ten sam problem, moją poprawką było umieszczenie klasy przed src w zakładce img.