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

92

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;
}
zefs
źródło
Nie rusza się dla mnie dalej22.0.1229.94 m
Danny
3
Najlepszą praktyką jest umieszczenie wskaźnika myszy na tagu A, a nie na samym obrazie.
Diodeus - James MacFarlane
Tak .img to klasa href. Czy powinienem nadać mu inną nazwę? może teraz to powoduje konflikt z <img src>? EDYCJA: Nvm, zmieniłem nazwę z .img na .thumb i nadal mam ten problem. Jakieś inne sugestie?
zefs
To prawdopodobnie coś, co robi Fancybox.
Diodeus - James MacFarlane
4
użycie tłumaczenia na osi Z było jedynym rozwiązaniem, które działało dla mnie: stackoverflow.com/questions/12502234/…
Larry

Odpowiedzi:

231

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/ .

alpipego
źródło
To jest prawidłowa odpowiedź, ale musisz powiedzieć, że backface-visibilitywłaściwość musi być ustawiona na imgelemencie. W moim przypadku element, który ma krycie, był aelementem, który zawija img, więc Twoja odpowiedź nie była dla mnie idealna. Przy okazji, znalazłem również tę usterkę w Firefoksie na Maca, więc sugeruję użycie przedrostków wszystkich dostawców.
Oliboy50
1
@ Oliboy50 Przepraszam, muszę to argumentować. Im moim przypadku uszkodzone elementy były jedynie pustymi divsz background-image. @alpipego Dzięki za rozwiązanie!
Bonflash
1
To zadziałało, ale sprawiło, że moje obrazy wyglądały źle, pikselowane zamiast gładkie.
Kieran Hunter
1
Nie wiem, dlaczego to działa, ale natrafiłem na to i spróbowałem. To naprawiło błąd, który pojawiał się w mojej witrynie od miesięcy, a którego nigdy nie mogłem zrozumieć. Dziękuję Ci!
Shnibble,
Musiałem też dodać a, z-indexaby efekt najechania na mnie działał poprawnie.
Jack
34

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ę.

Rick Giner
źródło
1
Czy ktoś wie, dlaczego tak jest? Na pewno nie jest to kwestia hasLayout?
sidonaldson,
7
Miał ten sam problem w Firefoksie teraz. Krewny tego nie naprawił, ale ustawienie tego w elemencie tak - transform: translate3d(0px,0px,0px);
ConorLuddy
Miałem ten sam problem na Safari i transform: translate3d(0px,0px,0px);pracował
zevnicsca
21

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.

Besków
źródło
1
Dzięki za to. To naprawiło to w Firefoksie! : D
Hans Wassink
Tak, ja też. Trik z backface nie zadziałał dla mnie (img inside a), ale ten zadziałał! Dzięki!
mikmikmik
To jedyna odpowiedź, która zadziałała dla mnie (Chrome). Dzięki!
Kid Diamond
14

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.

Nick F.
źródło
10

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;}
Jamland
źródło
10

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

filter: brightness(1.01);
Juan Casares
źródło
Ten sam problem z przejściem filtra po najechaniu kursorem. To też naprawiło to dla mnie.
Josh Harrison
Korzystanie z filtra: jasność (1); w elemencie img naprawiłem to za mnie, dziękuję
Sai,
to zadziałało dla mnie, wystąpił problem z 1 pikselem podczas stosowania filtru skali szarości na obrazie po najechaniu kursorem. Dlaczego programiści przeglądarek nie mogą w końcu naprawić tych wszystkich rzeczy? Dlaczego muszę używać widoczności z tyłu i tego wszystkiego ...
Varin,
To rozwiązuje problem, ale animacja przejścia przestaje działać
Amin
6

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
}
andersra
źródło
4

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ź

James Fletcher
źródło
Wypróbowałem wszystkie inne odpowiedzi, to była pierwsza, która zadziałała!
2

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; }
user2125009
źródło
2

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;
Lenin Zapata
źródło
2

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;
Josh z Qaribou
źródło
1

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.

sidonaldson
źródło
1
Dzięki za komentarz, zauważyłem również, że pozycja względna nie zawsze działa jako rozwiązanie, więc jeśli problem się powtórzy, spróbuję również Twojej metody.
zefs
0

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; */
}
cssninja
źródło
0

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

Beached As
źródło