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;
}
22.0.1229.94 m
Odpowiedzi:
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/ .
źródło
backface-visibility
właściwość musi być ustawiona naimg
elemencie. W moim przypadku element, który ma krycie, była
elementem, który zawijaimg
, 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.div
szbackground-image
. @alpipego Dzięki za rozwiązanie!z-index
aby efekt najechania na mnie działał poprawnie.Z jakiegoś powodu Chrome inaczej interpretuje pozycję elementów bez krycia 1. Jeśli zastosujesz atrybut CSS
position:relative
do elementów a.img, nie będzie już ruchu w lewo / w prawo, ponieważ ich krycie zmienia się.źródło
transform: translate3d(0px,0px,0px);
transform: translate3d(0px,0px,0px);
pracował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.
źródło
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-change
zapewnia 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.źródło
Musiałem zastosować oba
backface-visibility
itransform
reguły, aby zapobiec tej usterce. Lubię to:a {-webkit-transform: rotate(0);} a img {-webkit-backface-visibility: hidden;}
źródło
Miałem podobny problem z filtrami (bez krycia) po najechaniu kursorem. Naprawiono przez dodanie reguły do klasy bazowej z:
filter: brightness(1.01);
źródło
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 }
źródło
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ź
źródło
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; }
źródło
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;
źródło
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;
źródło
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.
źródło
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; */ }
źródło
Miał ten sam problem, moja poprawka polegała na umieszczeniu klasy przed src w zakładce img.
źródło