obraz przesuwa się po najechaniu kursorem - problem z przezroczystością chrome

Wygląda na to, że jest problem z moją stroną tutaj: http://www.lonewulf.eu

Po najechaniu kursorem na miniatury obraz przesuwa się nieco w prawo i dzieje się to tylko w Chrome.

Mój 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;
}

Innym rozwiązaniem byłoby użycie

-webkit-backface-visibility: hidden;

na elemencie hover, który ma nieprzezroczystość. Widoczność z tyłu dotyczy transform, więc @Beskow ma z tym coś wspólnego. Ponieważ jest to problem specyficzny dla zestawu webkit, wystarczy określić widoczność tylnej części zestawu webkit. Istnieją inne przedrostki dostawców .

Więcej informacji można znaleźć pod adresem http://css-tricks.com/almanac/properties/b/backface-visibility/ .

Z jakiegoś powodu Chrome inaczej interpretuje pozycję elementów bez krycia 1. Jeśli zastosujesz atrybut CSS position:relativedo elementów a.img, nie będzie już ruchu w lewo / w prawo, ponieważ ich krycie zmienia się.

Miałem ten sam problem, naprawiłem go za pomocą rotacji transformacji css. Lubię to:

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

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

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

will-change: opacity;

W moim konkretnym przypadku pozwoliło to uniknąć podobnego problemu ze skokami pikseli, który translateZ(0)pojawił się w Internet Explorerze, pomimo naprawiania rzeczy w Chrome.

Większość innych rozwiązań sugeruje tutaj, że wiążą transformacji (np. translateZ(0), rotate(0), translate3d(0px,0px,0px)Itp) działają poprzez przekazanie malowanie elementu nad do GPU, pozwalając na bardziej wydajne renderowanie. will-changezapewnia przeglądarce wskazówkę, która prawdopodobnie ma podobny efekt (umożliwiając przeglądarce bardziej wydajne renderowanie przejścia), ale sprawia wrażenie mniej hakerskiej (ponieważ wyraźnie rozwiązuje problem, a nie tylko nakłania przeglądarkę do korzystania z GPU).

To powiedziawszy, warto mieć na uwadze, że obsługa przeglądarki nie jest tak dobra will-change(choć jeśli problem dotyczy tylko Chrome, może to być dobra rzecz!), Aw niektórych sytuacjach może powodować własne problemy , ale nadal , to kolejne możliwe rozwiązanie tego problemu.

Musiałem zastosować oba backface-visibilityi transformreguły, aby zapobiec tej usterce. Lubię to:

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

Miałem podobny problem z filtrami (bez krycia) po najechaniu kursorem. Naprawiono przez dodanie reguły do ​​klasy bazowej z:

filter: brightness(1.01);

backface-visibility (lub -webkit-backface-visibility) naprawiło tylko problem w Chrome. Aby naprawić w obu przeglądarkach Firefox i Chrome, użyłem następującej 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
}

Napotkałem podobny problem w przeglądarce Safari 8.0.2, w której obrazy drgały podczas zmiany ich krycia. Żadna z opublikowanych tutaj poprawek nie zadziałała, ale następujące rzeczy:

-webkit-transform: translateZ(0);

Wszystkie zasługi dla tej odpowiedzi poprzez tę kolejną odpowiedź

Napotkałem ten problem z obrazami w siatce, każdy obraz był zagnieżdżony w zadeklarowanym bloku display: inline-block. Rozwiązanie, które opublikował Jamland powyżej, działało w celu rozwiązania problemu, gdy wyświetlacz: inline-block; został zadeklarowany w elemencie nadrzędnym.

Miałem inną siatkę, w której obrazy znajdowały się na nieuporządkowanej liście i mogłem po prostu zadeklarować display: block; oraz szerokość elementu listy nadrzędnej i zadeklarowana widoczność od tyłu: ukryta; na elemencie obrazu i wydaje się, że po najechaniu kursorem nie występuje żadna zmiana pozycji.

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

W tym problemie podano mi rozwiązanie alpipego . Użyj -webkit-backface-visibility: hidden; W tym przypadku obraz nie porusza się w przejściu przez przezroczystość

/* 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 tutaj, ponieważ wymagają one zmian w CSS, które mogą zepsuć inne rzeczy - pozycja: względna wymaga całkowitego przemyślenia sposobu pozycjonowania moich elementów, transform: rotacja (0) może kolidować z istniejącymi przekształca i daje niewyraźne małe efekty przejścia, gdy mam ustawiony czas trwania przejścia, a widoczność z tyłu nie będzie działać, jeśli kiedykolwiek będę potrzebować tylnej części (i wymaga wielu prefiksów).

Najbardziej leniwym rozwiązaniem, jakie znalazłem, jest ustawienie krycia na moim elemencie, które jest bardzo bliskie, ale nie do końca, 1. Jest to problem tylko, jeśli krycie wynosi 1, więc nie zepsuje się ani nie będzie kolidował z żadnym z moich innych stylów:

opacity:0.99999999;

Po oznaczeniu odpowiedzi Ricka Ginera jako poprawnej dowiedziałem się, że to nie rozwiązało problemu.

W moim przypadku mam responsywne obrazy szerokości zawarte w elemencie div max-width. Gdy szerokość witryny przekroczy tę maksymalną szerokość, obrazy przesuwają się po najechaniu kursorem (przy użyciu transformacji css).

Poprawka w moim przypadku polegała po prostu na zmianie maksymalnej szerokości na wielokrotność trzech, w tym przypadku trzech kolumn, i naprawiono to doskonale.

Zauważyłem, że Twój CSS zawiera nieprzezroczystość. Miałem dokładnie ten sam problem z Chrome (obraz przesuwał się po najechaniu kursorem). Jedyne, co zrobiłem, to wyłączenie krycia i zostało to rozwiązane, żadne obrazy się nie poruszały.

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

Miał ten sam problem, moja poprawka polegała na umieszczeniu klasy przed src w zakładce img.