- webkit-transform rotate-Pixelated images in Chrome

Używając -webkit-transform: rotate(-5deg); Na kontenerze div, Chrome renderuje siatkę obrazów z naprawdę postrzępionymi krawędziami. Natomiast w FF (-moz-transform:) i IE (-ms-filter:) wszystko wygląda OK - zobacz różnicę poniżej.

Czy mogę coś z tym zrobić?

chromeff

Author: Spudley, 2011-02-22
Source

9 answers

Możesz sprawdzić odpowiedź na pytanie transformacja css, postrzępione krawędzie w chrome

Pomógł mi

Z zaakceptowanej odpowiedzi:

W przypadku, gdy ktoś szuka tego później, miły trik, aby pozbyć się z tych postrzępionych krawędzi na transformacjach CSS w Chrome jest dodanie Właściwość CSS {[0] } o wartości hidden. W moich własnych testach to całkowicie je wygładziło. Mam nadzieję, że pomaga.

 68
Author: Christian Westman,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-05-23 12:10:53

Wygląda na to, że jest to błąd antyaliasing w silniku webkit. raport został złożony, ale jest jeszcze nierozwiązany .

Możesz spróbować dodać obramowanie w tym samym kolorze co tło, aby zminimalizować efekt.

 14
Author: Kyle,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2011-02-22 13:16:17 
-webkit-transform: rotate(-5deg) translate3d( 0, 0, 0);

Robi sztuczkę dla chrome.

 6
Author: Guido Gallenkamp,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2012-08-15 08:44:30

Próbowałeś regułę CSS -webkit-transform-style: preserve-3d;?

Możesz również spróbować obracać określoną oś za pomocą -webkit-transform: rotateZ(-5deg);.

 4
Author: Luke Dennis,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2012-08-15 19:26:24

Napotkałem ten problem na Chrome 33 (Windows 7). Wypróbowałem wszystkie sugerowane poprawki na tej stronie. Nastała nędza. Moja rotacja była dość prosta: 

transform: rotate(40deg);
-moz-transform: rotate(40deg);
-webkit-transform: rotate(40deg);

Znalazłem tę odpowiedź i po kilku szybkich eksperymentach odkryłem, że poniższa kombinacja sprawdza się doskonale w Chrome: 

-webkit-backface-visibility: hidden;
outline: 1px solid transparent;

Nie testowałem jeszcze cross browser. Nie mam pojęcia jakie kolejne błędy to wprowadza. Zostałeś ostrzeżony. Mam nadzieję, że to wskaże komuś właściwą kierunek.

Uwaga na marginesie: podczas moich eksperymentów odkryłem, że -webkit-backface-visibility: hidden; (samodzielnie) usunąłem antyaliasing z nieprzetransformowanych obrazów.

 3
Author: Just Plain High,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-05-23 10:32:36

Jest to błąd WebKit , który został już naprawiony i poprawka pojawi się w Chrome 15 .

Obejście, dopóki wszyscy nie zaktualizują do 15+, polega na zastosowaniu -webkit-backface-visibility: hidden; do obracanego elementu. Dla mnie zadziałało. To powoduje antyaliasing na elemencie.

 2
Author: Dmitry Leskov,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2012-12-07 13:26:20

Możesz dodać box-shadow do obrazów o tym samym kolorze co tło, co zmniejsza efekt.

Przykład: http://antialiasing-webkit.qip.li/edit/

 1
Author: soufell,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2011-07-20 02:29:57

Nie będzie to odpowiednie dla wszystkich zastosowań, ale jeśli masz kontrolę nad znacznikami i nie masz nic przeciwko dodaniu dodatkowego

, możesz użyć Wygenerowanej zawartości, aby znacznie oczyścić krawędzie obróconych obrazów w Chrome. Działa to, ponieważ Chrome zastosuje antyaliasing do wygenerowanej zawartości umieszczonej nad obrazem.

Możesz zobaczyć przykład tutaj: http://jsfiddle.net/cherryflavourpez/2SKQW/2/

Pierwszy obraz nic nie zrobił, drugi ma zastosowaną obramowanie pasujące do koloru tła - nie widzę żadnej różnicy.

Trzeci obrazek div ma wygenerowaną zawartość z obramowaniem umieszczonym wokół krawędzi. Tracisz piksel wokół krawędzi, ale wygląda znacznie lepiej. CSS jest dość oczywiste. Ma to tę zaletę, że nie wymaga od Ciebie tworzenia obramowania na swoim obrazie, co wydaje mi się zbyt dużą ceną.
 0
Author: CherryFlavourPez,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2011-03-30 12:11:26

Dla mnie to właśnie właściwość perspective CSS zadziałała: 

-webkit-perspective: 1000;

Zupełnie nielogiczne w moim przypadku, ponieważ nie używam przejść 3d, ale mimo to działa.

 0
Author: Aron,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2014-03-10 15:40:41