CSS трансформация, неровные края в хром - PullRequest
Новая
       70

CSS трансформация, неровные края в хром

184 голосов
/ 27 июня 2011

Я использую преобразование CSS3 для поворота изображений и текстовых полей с границами на моем веб-сайте.

Проблема в том, что в Chrome границы выглядят неровными, как в игре (с низким разрешением) без сглаживания,В IE, Opera и FF это выглядит намного лучше, потому что используется AA (который все еще хорошо виден, но не так уж плохо).Я не могу протестировать Safari, потому что у меня нет Mac.

Повернутая фотография и текст выглядят хорошо, только граница выглядит неровной.

Используемый мной CSSthis: 

.rotate2deg {
    transform: rotate(2deg);
    -ms-transform: rotate(2deg); /* IE 9 */
    -webkit-transform: rotate(2deg); /* Safari and Chrome */
    -o-transform: rotate(2deg); /* Opera */
    -moz-transform: rotate(2deg); /* Firefox */
}

Можно ли как-то исправить это, например, принудив Chrome использовать AA?

Пример ниже:

Jagged Edges example

Ответы [ 11 ]

0 голосов
/ 10 марта 2014

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

-webkit-perspective: 1000;

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

Страница:
...