Rozmyty tekst po użyciu transformacji CSS: scale (); w przeglądarce Chrome

126

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!

Ryan O'Rourke
źródło
Właśnie odwiedziłem witrynę za pomocą przeglądarki Firefox i IE 10, nie widzę problemu. Jeśli jest ograniczony do Chrome, być może trzeba będzie poczekać, aż Google sam to naprawi.
Nolonar
Nie widzę żadnego rozmycia ...
Korzystam
Natknąłem się na ten problem już wcześniej, jak wspomniał Nolonar, będziemy musieli poczekać, aż Google to naprawi.
raj_n
Nie jest to rozwiązanie, ale zauważyłem, że problem występuje tylko u mnie, gdy używam CSS optimizeLegibility.
Bangkokian
Link jest uszkodzony.
Timothy 003

Odpowiedzi:

78

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

backface-visibility: hidden;

TranslateZ działa również, ponieważ jest to hack, aby dodać przyspieszenie sprzętowe do animacji.

transform: translateZ(0);

Obie te właściwości rozwiązują problem, który masz, ale niektórzy lubią też je dodawać

-webkit-font-smoothing: subpixel-antialiased;

do ich animacji do obiektu. Uważam, że może zmienić renderowanie czcionki internetowej, ale nie krępuj się też eksperymentować z tą metodą.

2ne
źródło
12
Wydaje się, że wszystkie te techniki poprawiają sytuację, ale nadal nie mogę uzyskać tego samego poziomu przejrzystości przeglądarki Chrome, co w przeglądarce Firefox.
Michael Martin-Smucker
13
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ę.
ITWitch
14
Jak zasugerował @ykadaru, spróbuj dodać perspective(1px)do swojego transform:kodu, działało to dla mnie w Chrome, podczas gdy nic innego nie rozwiązało problemu
Serge Eremeev
4
Nie działa na Chrome w wersji 65.0.3325.162 (oficjalna kompilacja) (64-bitowy) działającym w systemie Ubuntu 17.10 z sesją Gnome X11 (Wayland wyłączony)
Marecky
3
W Chrome 72 pierwsze dwie opcje powodują rozmycie tekstu podczas i pod koniec transformacji
Brandito
24

Aby poprawić rozmycie, zwł. w Chrome spróbuj zrobić to:

transform: perspective(1px) translateZ(0);
backface-visibility: hidden;

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:

transform: translateZ(0);
backface-visibility: hidden;
ykadaru
źródło
4
Dla mnie to faktycznie pogarsza sprawę.
balu
1
U mnie to naprawia usterkę (bez tego element przesuwa się o 1px po zakończeniu animacji, transform: perspektywa (1px) samodzielnie napraw to!)
Sergiu
@balu sprawdź moją zaktualizowaną odpowiedź! pozbądź się perspective(1px)nieruchomości i zobacz, czy działa lepiej.
ykadaru
16

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.

Jordan Nakamoto
źródło
1
To jedyne podejście, które zadziałało dla mnie. Inne podejścia (widoczność od tyłu, dodawanie filtrów, perspektywa i stare dobre translateZ) tylko pogorszyły sytuację. Spróbuj skalować do całych pikseli. Na przykład przejdź z 14 do 16 pikseli, używając współczynnika skali 1,1429 (16/14).
hugo der hungrige
1
Pracowałem dla mnie bez translateZ(0), zmieniłem tylko 1.05na1.048
A. Volg
15

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.

Dan
źródło
Dlaczego ktoś miałby to głosować? Nie rozumiem ... :( Jest to całkowicie poprawny problem w niektórych wersjach Chrome i wydaje się, że ogólnie rzecz biorąc "będzie się zmieniać" jest nadal całkiem nowy i prawdopodobnie nie powinien być używany. Więcej informacji można znaleźć w
Dan,
Miałem ten sam problem. Dzięki za wysłanie wiadomości.
raine
Miałem ten sam problem z renderowaniem komponentów Material-Design w Chrome 75. Usunięcie stylu CSS „will-change” naprawiło problem.
Rob
Potwierdzone w Chrome 79
Fareesh Vijayarangam
1
Ja mam odwrotnie, dodając will-change: transform;nieco rozwiązuje problem
Jakub Zawiślak
14

Zamiast

transform: scale(1.5);

za pomocą

zoom : 150%;

rozwiązuje problem z rozmyciem tekstu w przeglądarce Chrome.

Naisheel Verdhan
źródło
Może pomóc, ale także wprowadza inne problemy, takie jak czasami wprowadzane białe linie graniczne
Kevin
1
nie wiem, dlaczego głos przeciw. Kiedy zastosowałem to do pól wyboru, zadziałało to znacznie lepiej niż transform: scale ()
Brian McCall
2
W przypadku przeglądarki Firefox użyj transform: scale () działa jak urok bez żadnego rozmycia. Będziesz musiał popracować nad wykrywaniem przeglądarki i odpowiednio postępować w przypadku chrome / safari i firefox.
Naisheel Verdhan
15
Inną kwestią jest to, że zoom nie wydają się działać z właściwością przejściowym, a więc nie mogą być wykorzystywane do animacji CSS
ericgrosse
3
Działa i leczy rozmycie, ale zmienia też położenie elementów.
user1156544
8

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.

filter: blur(.0px)
andyw
źródło
1
Czy dotarłeś gdzieś z raportem o błędzie?
Diazole
Obawiam się, że nawet nie pamiętam, gdzie zgłosiłam błąd. Zrobił to jednak.
andyw
Używam Bootstrap (4.4.1), Chrome (80.0.3987.132), Windows 10 (z widokiem powiększonym o 125%) i mam rozmyte teksty w menu rozwijanym. Menu jest pozycjonowane za pomocą 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ę na blur(0px). Ponieważ element jest dynamiczny, a także wymaga rozwiązania dynamicznego (JS), ... to jest do bani: \
akinuri
7

Sunderls doprowadziły mnie do odpowiedzi. Z wyjątkiem filter: scalenie 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):

backface-visibility: hidden;    
-webkit-filter: blur(0);

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.

ruidovisual
źródło
-webkit-filter: blur(0);tylko dla mnie działa. backface-visibility: hidden;rozmywa mój element, gdy później resetuję skalowanie.
Kai Hartmann
to trochę zabawne dla Chrome ... jeśli 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 CSS
Tom Roggero
1
@TomRoggero To brzmi mniej specyficznie dla wartości właściwości rozmycia, a więcej, gdy przerysowanie układu jest zakończone. Możesz poeksperymentować z wymuszeniem przerysowania elementu za pomocą JavaScript z pewnym opóźnieniem.
Gajus
5

Dowiedział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.

scipper
źródło
Miałem dokładnie ten sam problem, robiąc dokładnie to samo. Centrowałem modal z translate3d (-50%, -50%, 0). W moim przypadku podskoczyłem do -50,048% i wygląda idealnie.
Chris Gutierrez
4

Dodawanie perspective(1px)zadziałało dla mnie.

transform: scale(1.005);

do

transform: scale(1.005) perspective(1px);
SUHAIL KC
źródło
3

Spróbuj użyć zoom: 101%;do złożonych projektów, gdy nie możesz użyć kombinacji powiększenia i skali.

Tom Roggero
źródło
Zwróć uwagę, że zoomnie jest zdefiniowany przez żaden standard sieciowy i nie jest obsługiwany przez firefox caniuse.com/#feat=css-zoom
Boltgolt,
3

W moim przypadku poniższy kod spowodował rozmytą czcionkę:

-webkit-transform: translate(-50%,-50%);
transform: translate(-50%,-50%);

i samo dodanie właściwości zoom naprawiło to dla mnie. Baw się z zoomem, dla mnie zadziałały:

zoom: 97%;   
Raza Ahmed
źródło
4
Brak wsparcia dla zoom
Firefoksa
3

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

Corentin
źródło
3

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

<div id="box1" class="box">
    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry"s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
</div>

<div id="box2" class="box">
    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry"s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
</div>

<div id="box3" class="box">
    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry"s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
</div>

Oto CSS, w którym występuje błąd Chrome ...

*{margin:0; padding:0; border:0; outline:0; box-sizing:border-box;  background:#505050;}
.box {position:absolute; border:1px solid #fff; border-radius:10px; width:26%; background:#8e1515; padding:25px; top:20px; font-size:12pt; color:#fff; overflow:hidden; text-align:center; transition:0.5s ease-in-out;}
.box:hover {background:#191616;}
.box:active {background:#191616;}
.box:focus {background:#191616;}
#box1 {left:5%;}
#box2 {left:50%; transform:translateX(-50%);} /* Bugged */
#box3 {right:5%;}

Oto poprawiony css ...

*{margin:0; padding:0; border:0; outline:0; box-sizing:border-box;  background:#505050;}
.box {position:absolute; border:1px solid #fff; border-radius:10px; width:26%; background:#8e1515; padding:25px; top:20px; font-size:12pt; color:#fff; overflow:hidden; text-align:center; transition:0.5s ease-in-out;}
.box:hover {background:#191616;}
.box:active {background:#191616;}
.box:focus {background:#191616;}
#box1 {left:5%;}
#box2 {left:37%;} /* Fixed */
#box3 {right:5%;}

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.

SJacks
źródło
Podczas tłumaczenia można spodziewać się rozmycia, ponieważ element może zająć pół piksela . Istnieje obecnie lepsze alternatywy do centrowania rzeczy: próbka schematu flexbox , przykładowe siatki
Timothy003
Jedyną przeglądarką, którą przetestowałem, która wydaje się mieć problem z centrum transformacji, jest Chrome, wszystko inne wydaje się krystalicznie czyste. Spojrzałem wstecz i ten problem istnieje już od 7 lat! Nadal istnieje wiele sposobów na oskórowanie kota i, jak mówisz, nie jest to już potrzebne.
SJacks
to niewiarygodne, ale filter: blur (-0,1px); pomogło mi !!. jak do diabła to działa ??
jt3k
3

Mam ten sam problem. Naprawiłem to za pomocą:

.element {
  display: table
}
Ravi
źródło
2
szalone, ale działa; Chrome to najwyraźniej nowy IE
Arthur
Oooow panie! ir działa! domyślam się, że tabela
``
2

Żadne z powyższych nie działało dla mnie. Miałem tę animację dla wyskakujących okienek:

@keyframes pulse {
  from {
    transform: scale3d(1, 1, 1);
  }
  50% {
    transform: scale3d(1.05, 1.05, 1.05);
  }
  to {
    transform: scale3d(1, 1, 1);
  }
}

W moim przypadku efekt rozmycia zniknął po zastosowaniu tej reguły: -webkit-perspective: 1000;mimo że jest oznaczony jako nieużywany w inspektorze Chrome.

Gendos-ua
źródło
U mnie działa i jest również oznaczony jako nieużywany. Dodałem również, will-change: transform;że naprawia rozmycie granic elementów. Żadne inne odpowiedzi mi nie pomogły.
Jakub Zawiślak
2

Moje rozwiązanie brzmiało:

wyświetlacz: początkowy;

Wtedy był chrupiący i ostry


źródło
1

Ż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)

Sengupta Amit
źródło
Dodanie perspective(1px)faktycznie pogorszyło mnie :(
balu
1

Naprawiłem moją sprawę, dodając:

transform: perspective(-1px)
Anders Lund
źródło
To dla mnie właśnie usunęło scale()wynik transformacji
jpenna
1

DLA 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:

a {
    transition: all 500ms cubic-bezier(0.165, 0.840, 0.440, 1.000);
    transform: scale(0.8, 0.8);
}

a:hover {
    transform: translateZ(0)scale(1.0, 1.0);
}
JonasB
źródło
1

Użyłem kombinacji wszystkich odpowiedzi i to w końcu zadziałało:

.modal .modal--transition {
  display: inline-table;
  transform: perspective(1px) scale(1) translateZ(0);
  backface-visibility: hidden;
  -webkit-font-smoothing: subpixel-antialiased;
}
Kyle Underhill
źródło
1

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:

transform: perspective(1px);
filter: blur(0);
transform: translateZ(0);
backface-visibility: hidden;

Ż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ć!

Prajwal_Shenoy
źródło
1

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ącego

 transform-origin: 50% 50%;

ten

 transform-origin: 51% 51%;

to mi pomaga

Oleg Bondarenko
źródło
0

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.

Normangorman
źródło
0

Usunąłem to z mojego kodu - transform-style: preserve-3d; i dodałem to-transform: perspective(1px) translateZ(0);

plama zniknęła!

Tanha Islam
źródło
0

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.

Austin McCool
źródło
Oto, co stało się z moim. Nie mogę pozbyć się tego efektu rozmycia. Jednym z rozwiązań, które się sprawdziło, jest ustawienie tych właściwości: top: 0, bottom: 0, left: 0; right: 0; margin: autoale 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.
kwiat1990
0

Trudno będzie go rozwiązać za pomocą samego CSS.

Więc rozwiązałem to za pomocą jquery.

To jest mój CSS.

.trY {
   top: 50%;
   transform: translateY(-50%);
}

.trX {
   left: 50%;
   transform: translateX(-50%);
}

.trXY {
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
}

a to jest moja jquery.

function tr_init() {
$(".trY, .trX, .trXY").each(function () {
    if ($(this).outerWidth() % 2 != 0) {
        var fixed_width = Math.ceil($(this).outerWidth() / 2) * 2;
        $(this).css("width", fixed_width);
    }
    if ($(this).outerHeight() % 2 != 0) {
        var fixed_height = Math.ceil($(this).outerHeight() / 2) * 2;
        $(this).css("height", fixed_height);
    }
})}
madstone
źródło
0

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.

user1769038
źródło
-1

Tekst nie będzie rozmyte, jeśli nie .transitiontransform

Po prostu zrób to:

&:hover {
    transform: scale(1.1);
}

Bez przejścia jak transition: all .2s;

kyw
źródło