#ИМЯ?

Используя -webkit-transform: rotate(-5deg); в контейнере div, Chrome отображает сетку изображений с действительно зубчатыми краями. Если в FF (-moz-transform:) и IE (-ms-filter:) все выглядит нормально - см. Разницу ниже.

Есть ли что-нибудь, что я могу сделать по этому поводу?

Ответ 1

Вы можете проверить ответ на вопрос css transform, зубчатые края в chrome

Помог мне выйти

Из принятого ответа:

В случае, если кто-то ищет это позже, хороший трюк, чтобы избавиться этих зубчатых краев в преобразованиях CSS в Chrome - это добавить Свойство CSS -webkit-backface-visibility со значением hidden. В моих собственных тестах это полностью сгладило их. Надеюсь что помогает.

Ответ 2

Кажется, это ошибка Antialiasing в движке webkit. Сообщение было отправлено, но пока не разрешено.

Вы можете попробовать добавить границу того же цвета, что и ваш фон, чтобы попытаться свести к минимуму эффект.

Ответ 3

-webkit-transform: rotate(-5deg) translate3d( 0, 0, 0);

Используется ли трюк для хрома.

Ответ 4

Вы пробовали правило CSS -webkit-transform-style: preserve-3d;?

Вы также можете попробовать вращать конкретную ось с помощью -webkit-transform: rotateZ(-5deg);.

Ответ 5

Я столкнулся с этой проблемой в Chrome 33 (Windows 7). Я пробовал все предлагаемые исправления на этой странице. Произошло страдание. Моя ротация была довольно простой:

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

Я нашел этот ответ, и после нескольких быстрых экспериментов я обнаружил, что следующая комбинация отлично работает в Chrome:

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

Я еще не тестировал кросс-браузер. Я понятия не имею, какие дальнейшие ошибки это вводит. Вы были предупреждены. Надеюсь, это указывает на кого-то в правильном направлении.

Примечание: во время моих экспериментов я обнаружил, что -webkit-backface-visibility: hidden; (само по себе) удалено сглаживание из нетрансформированных изображений.

Ответ 6

Это ошибка WebKit, которая уже исправлена, и исправление должны появиться в Chrome 15.

Обходной путь до тех пор, пока все не будут обновлены до 15+, применит -webkit-backface-visibility: hidden; к вращающемуся элементу. Работал для меня. Это вызывает сглаживание элемента.

Ответ 7

Вы можете добавить тень к вашим изображениям с тем же цветом, что и ваш фон, что уменьшит эффект.

Пример: http://antialiasing-webkit.qip.li/edit/

Ответ 8

Это не будет подходящим для всех видов использования, но там, где вы контролируете разметку, и не возражаете добавить дополнительный <div> , вы можете использовать сгенерированный контент, чтобы резко очистить края повернутых изображений в Chrome. Это работает, потому что Chrome будет применять сглаживание к сгенерированному контенту, размещенному над изображением.

Здесь вы можете увидеть пример: http://jsfiddle.net/cherryflavourpez/2SKQW/2/

Первое изображение ничего не сделало, второе имеет границу, применяемую для соответствия цвету фона - никакой разницы, которую я могу видеть.

Третье изображение div имеет некоторое сгенерированное содержимое с границей, расположенной вокруг края. Вы теряете пиксель вокруг края, но он выглядит намного лучше. CSS довольно понятен. Это имеет то преимущество, что вам не нужно создавать границу в вашем изображении, что для меня кажется слишком большой ценой.

Ответ 9

Для меня это была перспектива CSS-свойства, которая сделала трюк:

-webkit-perspective: 1000;

Полностью нелогично в моем случае, поскольку я не использую никаких 3D-переходов, но тем не менее работает.