Mam trochę CSS, które po najechaniu myszą, efekt przejścia CSS przesunie div.
Problem, jak widać na przykładzie, polega na tym, że translate
przejście ma okropny efekt uboczny polegający na tym, że obraz w elemencie div przesuwa się o 1 piksel w dół / w prawo (i może nawet nieznacznie zmienia rozmiar?), Aby wyglądał na nie na miejscu i nieostry ...
Ta usterka wydaje się występować przez cały czas stosowania efektu najechania, a z procesu prób i błędów mogę śmiało powiedzieć, że pojawia się tylko wtedy, gdy przejście translacji przesuwa element div (cienie pola i krycie są również stosowane, ale nie mają znaczenia błąd po usunięciu).
Problem wydaje się występować tylko wtedy, gdy strona zawiera paski przewijania. Tak więc przykład z tylko jednym wystąpieniem elementu div jest w porządku, ale po dodaniu kolejnych identycznych elementów div i strona wymaga paska przewijania, problem pojawia się ponownie ...
źródło
Odpowiedzi:
Aktualizacja 2020
image-rendering
właściwość CSS.<img>
tagiem za pomocą właściwości CSS dopasowanej do obiektu.Oryginalna odpowiedź
Spróbuj tego w swoim CSS :
To powoduje, że podział zachowuje się „bardziej w 2D”.
backface-visibility
itransform
bez-webkit-
prefiksu. Obecnie nie wiem, jak to wpływa na renderowanie w innych przeglądarkach (FF, IE), więc ostrożnie używaj wersji bez prefiksu.źródło
-webkit-transform
tak naprawdę nie widzę zmiany, i kiedy otwieram konsolę programisty Chromes. Widzę, że te 2 właściwości css są przekreślane, jakby zostały nadpisane, ale tak nie jest (puste css i html). To tak, jakby chrom już ich nie akceptował.Musisz zastosować transformację 3D do elementu, aby uzyskać własną warstwę kompozytową. Na przykład:
lub
Więcej o kryteriach tworzenia warstw można przeczytać tutaj: Przyspieszone renderowanie w Chrome
Wyjaśnienie:
Przykłady (najedź na zielone pole):
Kiedy używasz dowolnego przejścia w swoim elemencie, powoduje to ponowne obliczenie stylów przez przeglądarkę, a następnie ponowne ułożenie treści, nawet jeśli właściwość przejścia jest wizualna (w moich przykładach jest to krycie) i ostatecznie pomaluj element:
Problem polega na zmianie układu treści, co może powodować „tańczące” lub „migające” elementy na stronie podczas przejścia. Jeśli przejdziesz do ustawień, zaznacz pole wyboru „Pokaż warstwy kompozytowe”, a następnie zastosuj transformację 3D do elementu, zobaczysz, że ma on własną warstwę, która jest zaznaczona pomarańczową obwódką.
Po tym, jak element otrzyma własną warstwę, przeglądarka musi tylko połączyć warstwy podczas przejścia bez zmiany układu lub nawet operacji malowania, więc problem musi zostać rozwiązany:
źródło
translateZ: 0.000001
(trochę nieskończenie mały #) i voila! Jeszcze raz ostre obrazy w tle!Miałem ten sam problem z osadzonym elementem iframe YouTube (tłumaczenia zostały użyte do wyśrodkowania elementu iframe). Żadne z powyższych rozwiązań nie działało, dopóki nie spróbowano zresetować filtrów css i nie nastąpiła magia.
Struktura:
Styl [przed]
Styl [po]
źródło
filter: blur(0)
zrobił to dla mnie!-webkit-
przedrostek nie powinien występować wcześniej? Więcej informacjiPoleciłem eksperymentalny nowy atrybut CSS, który przetestowałem na najnowszej przeglądarce i jest dobry:
Dzięki temu przeglądarka będzie znała algorytm renderowania
źródło
image-rendering: -webkit-optimize-contrast;
rozwiązuje problem w przeglądarce Chrome. Jednak obrazy w innych przeglądarkach, np. Firefox, są renderowane znacznie, znacznie gorzej, gdy ustawiona jest opcja renderowania. Dlatego używam tylko dyrektywy WebKit, która działa również na silniku Blink. Dzięki!Właśnie znalazłem inny powód, dla którego element staje się rozmazany podczas transformacji. Używałem
transform: translate3d(-5.5px, -18px, 0);
do zmiany położenia elementu po załadowaniu, jednak ten element stał się rozmazany.Wypróbowałem wszystkie powyższe sugestie, ale okazało się, że było to spowodowane tym, że użyłem wartości dziesiętnej dla jednej z przetłumaczonych wartości. Całe liczby nie powodują rozmycia, a im dalej oddalałem się od liczby całkowitej, tym gorsze stawało się rozmycie.
tj.
5.5px
najbardziej,5.1px
najmniej rozmywa element .Pomyślałem, że rzucę to tutaj na wypadek, gdyby komuś to pomogło.
źródło
Oszukałem problem używając przejścia krokowego, a nie płynnego
To nie jest rozwiązanie, to oszustwo i nie wszędzie można je zastosować.
Nie potrafię tego wyjaśnić, ale to działa dla mnie. Żadna inna odpowiedź mi nie pomaga (OSX, Chrome 63, wyświetlacz Non-Retina).
https://jsfiddle.net/tuzae6a9/6/
źródło
Skalowanie do podwojenia i zmniejszenie do połowy z
zoom
działało dla mnie.źródło
Wypróbowałem około 10 możliwych rozwiązań. Zmieszałem je i nadal nie działały poprawnie. Na końcu zawsze był wstrząs 1px.
Znajduję rozwiązanie, skracając czas przejścia na filtrze.
To nie zadziałało:
Rozwiązanie:
Spróbuj tego na skrzypcach:
Mam nadzieję, że to komuś pomoże.
źródło
Próbować
filter: blur(0);
U mnie to zadziałało
źródło
Dla mnie teraz w 2018 roku. Jedyną rzeczą, która rozwiązała mój problem (biała glitchy-migotająca linia przebiegająca przez obraz po najechaniu kursorem), było zastosowanie tego do mojego elementu łącza, który zawiera element obrazu, który ma
transform: scale(1.05)
źródło
Pomogło mi ustawienie wartości czasu trwania
.3s
przejścia równych krokom czasowym przejścia.3s
źródło
Właśnie mam ten sam problem. Spróbuj ustawić pozycję: względem elementu nadrzędnego, który działał dla mnie.
źródło