Я использовал CSS3-трансформацию для поворота изображений и текстовых полей с границами на моем веб-сайте.
Проблема в том, что границы выглядят неровными в Chrome, как игра (с низким разрешением) без сглаживания. В IE, Opera и FF это выглядит намного лучше, потому что используется AA (который все еще хорошо виден, но не так уж плохо). Я не могу проверить Safari, потому что у меня нет Mac.
Повернутая фотография и сам текст выглядят хорошо, только граница выглядит неровной.
Я использую CSS так:
.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?
Пример ниже:
Ответы:
В случае, если кто-то ищет это позже, хороший способ избавиться от этих неровных краев при преобразованиях CSS в Chrome - добавить свойство CSS
-webkit-backface-visibility
со значениемhidden
. В моих собственных тестах это полностью сгладило их. Надеюсь, это поможет.источник
padding: 1px; -webkit-background-clip: content-box;
padding: 1px;-webkit-backface-visibility:hidden;backface-visibility:hidden;-webkit-background-clip:content-box;background-clip:content-box;
Если вы используете
transition
вместоtransform
,-webkit-backface-visibility: hidden;
не работает. Зубчатый край появляется во время анимации для прозрачного файла PNG.Для ее решения я использовал:
outline: 1px solid transparent;
источник
Добавление прозрачной границы размером 1 пиксель вызовет сглаживание
Или добавьте прозрачную коробку-тень размером 1 пиксель.
источник
outline: 1px solid transparent;
работа хорошо для меня. Другие решения выше не работали достаточно хорошо.outline: 1px solid transparent;
активировать сглаживание также в Firefox 52 (с теми же проблемами в Chrome)Попробуйте 3d-трансформацию. Это работает как шарм!
источник
preserve-3d
,rotate
все еще может использоваться без перехода наrotateZ
) делает.Выбранный ответ (ни один из других ответов) не сработал для меня, но это сработало:
img {outline:1px solid transparent;}
источник
У меня возникла проблема с градиентом CSS3 с -45deg.
background
Косо, был сильно зазубренными аналогичные, но хуже , чем исходное сообщение. Поэтому я начал играть с обоимиbackground-size
. Это растянет неровности, но все еще было. Кроме того, я прочитал, что у других людей тоже возникают проблемы с шагом 45 градусов, поэтому я настроился-45deg
на-45.0001deg
и моя проблема была решена.В моем CSS ниже
background-size
изначально был30px
иdeg
для градиента фона был точно-45deg
, и все ключевые кадры были30px 0
.источник
Возможно, вы сможете замаскировать неровности с помощью размытых теней . Использование -webkit-box-shadow вместо box-shadow гарантирует, что это не повлияет на браузеры, не относящиеся к webkit. Возможно, вы захотите проверить браузеры Safari и мобильный webkit.
Результат несколько лучше, но все же намного хуже, чем в других браузерах:
источник
Просто подумал, что мы добавим и наше решение, поскольку у нас была точно такая же проблема в Chrome / Windows.
Мы попробовали решение по @stevenWatkins выше, но все еще имели «степпинг».
Вместо того
Мы использовали:
Для нас это помогло 🎉
источник
Добавление следующего в div, окружающий рассматриваемый элемент, исправило это для меня.
В моем случае вокруг видеоокна появлялись неровные края.
источник
Для меня это было свойство CSS перспективы, которое добилось цели:
Совершенно нелогично в моем случае, так как я не использую 3d-переходы, но, тем не менее, работает.
источник
Для холста в Chrome (Версия 52)
Все перечисленные ответы об изображениях. Но моя проблема связана с canvas в chrome (v.52) с transform rotate. Они стали зазубренными, и все эти методы не могут помочь.
Решение, которое работает для меня:
Итак, важные блоки кода:
Пример: https://jsfiddle.net/tLbxgusx/1/
Примечание: вложенных элементов div много, потому что это упрощенная версия из моего проекта.
Эта проблема воспроизводится также для Firefox для меня. На Safari и FF с сетчаткой нет такой проблемы.
И еще одно обоснованное решение - поместить canvas в div такого же размера и применить к нему следующий CSS:
И вращение должно быть применено к этому упаковочному div. Таким образом, указанное решение работает, но с небольшими изменениями.
И модифицированный пример для такого решения: https://jsfiddle.net/tLbxgusx/2/
Примечание: см. Стиль div с классом «третий».
источник