Пара тапок » skew http://paratapok.ru Блог о веб-разработке Sun, 18 Dec 2022 12:14:48 +0000 ru-RU hourly 1 https://wordpress.org/?v=4.3.34 Баг: кривой рендеринг Firefox блоков со skew-трансформацией http://paratapok.ru/frontend/2623_bag-krivoj-rendering-firefox-blokov-so-skew-transformaciej/ http://paratapok.ru/frontend/2623_bag-krivoj-rendering-firefox-blokov-so-skew-transformaciej/#comments Fri, 10 Feb 2017 13:38:44 +0000 http://paratapok.ru/?p=2623 Читать далее →]]> Сегодня столкнулся с багом в Firefox (на момент написания заметки актуальная версия 51.0.1), связанный с отрисовкой блоков, для которых применены css-свойства skew-трансформации:

.skew {
    background: #008478;
    transform: skewX(-38.8deg);
    width: 50%;
    height: 100vh;
}
Firefox не сглаживает границы блоков со skew-трансформацией

Firefox не сглаживает границы блоков со skew-трансформацией

Все остальные браузеры, включая Edge, рендерят данный блок нормально, и только Firefox вместо того, чтобы сглаживать границу, отрисовывает ее лесенкой. Причем при удалении текста из блока или задании ему свойств visibility: hidden или opacity: 0 Firefox начинает рендерить эту границу как следует.

Решение оказывается весьма простое — следует лишь задать блоку, который подвергается skew-трансформации свойство outline: 1px solid transparent или задать рамку например в цвет фона, в нашем случае border: 1px solid #fff.

]]>
http://paratapok.ru/frontend/2623_bag-krivoj-rendering-firefox-blokov-so-skew-transformaciej/feed/ 0