-webkit-transform rotate - пиксельные изображения в Chrome

Question

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

Могу ли я что-нибудь сделать с этим?

Answer 1

Вы можете проверить ответ на вопрос css transform, неровные края в хроме

Выручил меня

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

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

Answer 2

Похоже, что это ошибка Сглаживание в движке webkit. Отчет был подан, но еще не решен .

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

Answer 3

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

Трюк с хромом.

Answer 4

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

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

Answer 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; (сам по себе) удаляет сглаживание из нетрансформированных изображений.

Answer 6

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

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

Answer 7

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

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

Answer 8

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

-webkit-perspective: 1000;

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

Answer 9

Это не подходит для всех применений, но если вы контролируете разметку и не возражаете добавить дополнительные

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

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

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

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