Как убрать границу лесенкой?

Question

[pvshvb]

Суть проблемса в том, что я поворачиваю div с помощью rotate вправо влево не суть
Суть в том, что при этом повороте граница div'a становится не ровной, а «рваной» (надеюсь на картинке понятно видно)
Есть ли возможность это как-то исправить?

Все происходит на safari в iOS

Comments

[xdevelx]

Попробуйте обрезать блок с помощью clip-path.

Answer 1

[pvshvb]

Нашёл решение
outline: 1px solid transparent;

Answer 2

[strelok011]

попробуйте добавить вот это в класс
-webkit-backface-visibility: hidden;

Comments

[pvshvb]

Не сработало :(

[strelok011]

тогда скорее всего никак.
Проблема в лесенке - не срабатывающий антиалиасинг в некоторых браузерах и/или устройствах. Это может быть для экономии или оптимизации. Надо гуглить и пробовать разные рекомендации по этой теме. Есть еще сглаживание для шрифтов например...

.myElement{
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}