Wygląda na to, że ostatnia aktualizacja przeglądarki Google Chrome powoduje rozmazany tekst po wykonaniu pliku transform: scale()
. W szczególności robię to:
@-webkit-keyframes bounceIn {
0% {
opacity: 0;
-webkit-transform: scale(.3);
}
50% {
opacity: 1;
-webkit-transform: scale(1.05);
}
70% {
-webkit-transform: scale(.9);
}
100% {
-webkit-transform: scale(1);
}
}
Jeśli odwiedzasz http://rourkery.com w przeglądarce Chrome, powinieneś zobaczyć problem w głównym obszarze tekstowym. Kiedyś tego nie robił i wydaje się, że nie wpływa to na inne przeglądarki webkit (takie jak Safari). Było kilka innych postów o ludziach, którzy mają podobny problem z transformacjami 3D, ale nie mogę znaleźć nic na temat transformacji 2D.
Wszelkie pomysły będą mile widziane, dzięki!
google-chrome
css
webkit
transform
css-animations
Ryan O'Rourke
źródło
źródło
Odpowiedzi:
Mam ten problem kilka razy i wydaje się, że są 2 sposoby jego rozwiązania (pokazane poniżej). Możesz użyć dowolnej z tych właściwości, aby naprawić renderowanie, lub obu jednocześnie.
Ukryta widoczność od tyłu rozwiązuje problem, ponieważ upraszcza animację tylko do przodu obiektu, podczas gdy stanem domyślnym jest przód i tył.
TranslateZ działa również, ponieważ jest to hack, aby dodać przyspieszenie sprzętowe do animacji.
Obie te właściwości rozwiązują problem, który masz, ale niektórzy lubią też je dodawać
do ich animacji do obiektu. Uważam, że może zmienić renderowanie czcionki internetowej, ale nie krępuj się też eksperymentować z tą metodą.
źródło
backface-visibility: hidden;
z pewnością zadziałało w moim przypadku, rozwiązując jakiś dziwny rozmyty ruch spowodowany przejściem krycia, to znaczy. Dziwny ruch teraz zniknął, ALE spowodował, że teksty w moim div na stałe zamazały się.perspective(1px)
do swojegotransform:
kodu, działało to dla mnie w Chrome, podczas gdy nic innego nie rozwiązało problemuAby poprawić rozmycie, zwł. w Chrome spróbuj zrobić to:
AKTUALIZACJA: Perspektywa zwiększa odległość między użytkownikiem a płaszczyzną Z, która technicznie skaluje obiekt, sprawiając, że rozmycie wydaje się „trwałe”.
perspective(1px)
Powyżej jest jak kaczka-taśmy , ponieważ mamy dopasowanie rozmazania staramy się rozwiązać. Możesz mieć więcej szczęścia z poniższym css:źródło
perspective(1px)
nieruchomości i zobacz, czy działa lepiej.Zauważyłem, że trochę pomogło dostosowanie współczynnika skali.
Korzystanie
scale(1.048)
ponad(1.05)
Wydawało się, że generuje lepsze przybliżenie rozmiaru czcionki z całego piksela, zmniejszając rozmycie subpikselowe.Użyłem również,
translateZ(0)
co wydaje się dostosowywać ostatni krok zaokrąglania Chrome w animacji transformacji. Jest to plus za korzystanie z funkcji onhover, ponieważ zwiększa prędkość i zmniejsza szum wizualny. Jednak w przypadku funkcji onclick nie użyłbym jej, ponieważ przekształcona czcionka nie wydaje się być tak chrupiąca.źródło
translateZ(0)
, zmieniłem tylko1.05
na1.048
Po wypróbowaniu wszystkiego innego tutaj bez powodzenia, ostatecznie rozwiązałem ten problem usunięcie z
will-change: transform;
nieruchomości. Z jakiegoś powodu spowodowało to strasznie niewyraźne skalowanie w przeglądarce Chrome, ale nie Firefox.źródło
will-change: transform;
nieco rozwiązuje problemZamiast
za pomocą
rozwiązuje problem z rozmyciem tekstu w przeglądarce Chrome.
źródło
To musi być błąd w Chrome (wersja 56.0.2924.87), ale poniższe rozwiązanie rozwiązuje problem rozmycia podczas zmiany właściwości css w konsoli („. 0”). Zgłoszę to.
źródło
transform: translate3d();
i wydaje się, że powoduje to problem. Żadne z proponowanych rozwiązań nie zadziałało. Z wyjątkiem / trochę tego. Działa to tylko wtedy, gdy ustawię go najpierw na jakąś dodatnią wartość (np.blur(0.1px)
), A następnie zmienię nablur(0px)
. Ponieważ element jest dynamiczny, a także wymaga rozwiązania dynamicznego (JS), ... to jest do bani: \Sunderls doprowadziły mnie do odpowiedzi. Z wyjątkiem
filter: scale
nie istnieje, alefilter: blur
tak.Zastosuj kolejne deklaracje do elementów, które wydają się rozmyte (w moim przypadku były wewnątrz przekształconego elementu):
To prawie działało idealnie. „ Prawie ”, ponieważ używam przejścia i podczas przejścia elementy nie wyglądają idealnie, ale po zakończeniu przejścia tak.
źródło
-webkit-filter: blur(0);
tylko dla mnie działa.backface-visibility: hidden;
rozmywa mój element, gdy później resetuję skalowanie.blur(0px);
ustawię, to nie naprawię. ale jeśli to zrobię,blur(1px);
a następnie naciśnę klawisz strzałki w dółblur(0px);
, wygląda to poprawnie. Przeszedłem na odświeżanie strony / bez względu na to, co napiszę w CSSDowiedziałem się, że problem występuje w przypadku względnych przekształceń w jakikolwiek sposób. translateX (50%), scale (1.1) czy cokolwiek. podanie wartości bezwzględnych zawsze działa (nie powoduje rozmycia tekstu (uresów)).
Żadne z wymienionych tutaj rozwiązań nie zadziałało i myślę, że jeszcze nie ma rozwiązania (używając Chrome 62.0.3202.94, kiedy to piszę).
W moim przypadku
transform: translateY(-50%) translateX(-50%)
powoduje rozmycie (chcę wyśrodkować okno dialogowe).Aby osiągnąć nieco bardziej „bezwzględne” wartości, musiałem ustawić wartości dziesiętne na
transform: translateY(-50.09%) translateX(-50.09%)
.UWAGA
Jestem pewien, że te wartości różnią się na różnych rozmiarach ekranu. Chciałem tylko podzielić się swoimi doświadczeniami, na wypadek gdyby to komuś pomogło.
źródło
Znalazłem znacznie lepsze i czystsze rozwiązanie:
lub
Dzięki temu wpisowi: Zapobieganie rozmytemu renderowaniu za pomocą transform: scale
źródło
Dodawanie
perspective(1px)
zadziałało dla mnie.do
źródło
Spróbuj użyć
zoom: 101%;
do złożonych projektów, gdy nie możesz użyć kombinacji powiększenia i skali.źródło
zoom
nie jest zdefiniowany przez żaden standard sieciowy i nie jest obsługiwany przez firefox caniuse.com/#feat=css-zoomW moim przypadku poniższy kod spowodował rozmytą czcionkę:
i samo dodanie właściwości zoom naprawiło to dla mnie. Baw się z zoomem, dla mnie zadziałały:
źródło
zoom
Kolejną poprawką, którą właśnie znalazłem dla rozmytych transformacji (translate3d, scaleX) w Chrome, jest ustawienie elementu jako „ display: inline-table ;". Wydaje się, że w niektórych przypadkach wymusza zaokrąglenie pikseli (na osi X).
Czytałem, że pozycjonowanie subpikseli w Chrome było zamierzone i deweloperzy tego nie naprawią.
źródło
Aktualizacja 2019
Błąd wyświetlania Chrome jest nadal nieusunięty i chociaż nie jest to wina patronów, żadna z propozycji przedstawionych w całości tej witryny nie pomaga w rozwiązaniu problemu. Mogę się zgodzić, że próbowałem każdego z nich na próżno: tylko 1 jest blisko i taka jest reguła css: filter: blur (0); co eliminuje przesuwanie kontenera o 1 piksel, ale nie rozwiązuje problemu z niewyraźnym wyświetlaniem samego kontenera i wszelkiej zawartości, którą może on zawierać.
Oto rzeczywistość: dosłownie nie ma rozwiązania tego problemu, więc oto obejście dla płynnych witryn internetowych
PRZYPADEK
Obecnie tworzę płynną stronę internetową i mam 3 elementy div, wszystkie wyśrodkowane z efektami najechania kursorem i udostępniającymi wartości procentowe zarówno w szerokości, jak i pozycji. Błąd Chrome występuje w środkowym kontenerze, który jest ustawiony na lewo: 50%; i transform: translateX (-50%); wspólne ustawienie.
PRZYKŁAD: Najpierw HTML ...
Oto CSS, w którym występuje błąd Chrome ...
Oto poprawiony css ...
Zakłócone skrzypce: https://jsfiddle.net/m9bgrunx/2/
Naprawiono skrzypce: https://jsfiddle.net/uoc6e2dm/2/
Jak widać, niewielka ilość poprawek w CSS powinna zmniejszyć lub wyeliminować wymóg używania transformacji do pozycjonowania. Może to również dotyczyć witryn o stałej szerokości, a także elastycznych.
źródło
Mam ten sam problem. Naprawiłem to za pomocą:
źródło
Żadne z powyższych nie działało dla mnie. Miałem tę animację dla wyskakujących okienek:
W moim przypadku efekt rozmycia zniknął po zastosowaniu tej reguły:
-webkit-perspective: 1000;
mimo że jest oznaczony jako nieużywany w inspektorze Chrome.źródło
will-change: transform;
że naprawia rozmycie granic elementów. Żadne inne odpowiedzi mi nie pomogły.Moje rozwiązanie brzmiało:
wyświetlacz: początkowy;
Wtedy był chrupiący i ostry
źródło
Żadne z powyższych nie działało dla mnie.
Zadziałało, kiedy dodałem perspektywę
tj. z
transform : translate3d(-10px,-20px,0) scale3d(0.7,0.7, 1)
zmieniłem na
transform : perspective(1px) translate3d(-10px,-20px,0) scale3d(0.7,0.7, 1)
źródło
perspective(1px)
faktycznie pogorszyło mnie :(Naprawiłem moją sprawę, dodając:
źródło
scale()
wynik transformacjiDLA CHORME:
Wypróbowałem tutaj wszystkie sugestie. Ale nie zadziałało. Moja uczelnia znalazła świetne rozwiązanie, które działa lepiej:
NIE powinieneś skalować powyżej 1.0
I uwzględnij
translateZ(0)
w najechaniu, ale NIE w pozycji bez najechania / początkowej.Przykład:
źródło
Użyłem kombinacji wszystkich odpowiedzi i to w końcu zadziałało:
źródło
Miałem problem z rozmytym tekstem w przeglądarce Chrome, ale nie w przeglądarce Firefox, kiedy korzystałem
transform: translate(-50%,-50%)
.Cóż, naprawdę wypróbowałem wiele obejść, takich jak:
Żadne z nich nie zadziałało.
Na koniec wyrównałem wysokość i szerokość elementu. To rozwiązało problem za mnie !!!
Uwaga: może to zależeć od przypadku użycia do przypadku użycia. Ale na pewno warto spróbować!
źródło
Wypróbowałem wiele przykładów z tych odpowiedzi, niestety nic nie pomogło w Chrome,
Version 81.0.4044.138
zamiast tego dodałem do elementu transformującegoten
to mi pomaga
źródło
Dla mnie problem polegał na tym, że moje elementy były używane
transformStyle: preserve-3d
. Zdałem sobie sprawę, że nie jest to w rzeczywistości potrzebne dla aplikacji i usunięcie go naprawiło rozmycie.źródło
Usunąłem to z mojego kodu -
transform-style: preserve-3d;
i dodałem to-transform: perspective(1px) translateZ(0);
plama zniknęła!
źródło
Wydaje się, że w przeglądarce Chrome 74.0.3729.169, aktualnej z dnia 25.05.19, nie ma żadnego rozwiązania problemu rozmycia przy niektórych poziomach powiększenia przeglądarki spowodowanego przez przekształcenie. Nawet prosty
TransformY(50px)
element rozmyje element. To nie występuje w aktualnych wersjach przeglądarki Firefox, Edge lub Safari i nie wydaje się występować na wszystkich poziomach powiększenia.źródło
top: 0, bottom: 0, left: 0; right: 0; margin: auto
ale wtedy kontener zajmie całą możliwą przestrzeń (musi to być szerokość), więc nie działa to w przypadku, gdy zawartość powinna decydować o tym, jak duży będzie kontener.Trudno będzie go rozwiązać za pomocą samego CSS.
Więc rozwiązałem to za pomocą jquery.
To jest mój CSS.
a to jest moja jquery.
źródło
Aby dodać do szaleństwa naprawiania, umieszczenie {border: 1px solid # ???} wokół źle wyglądającego obiektu rozwiązuje problem. Jeśli masz stabilny kolor tła, rozważ to również. To takie głupie, chyba nikt nie pomyślał o wspominaniu, eh eh.
źródło
możesz użyć css,
filter
aby to naprawić.o przedrostku dostawcy, zrób to sam.
-webkit-filter
,-ms-filter
. szczegóły są tutaj http://browser.colla.me/show/css_transformation_scale_cause_blurringźródło
filter: scale
Według developer.mozilla.org/en/docs/Web/CSS/filterTekst nie będzie rozmyte, jeśli nie .
transition
transform
Po prostu zrób to:
Bez przejścia jak
transition: all .2s;
źródło