skew ступени

[Zverushka]

http://jsfiddle.net/Zverushka/fHBg9/3/

Ну бесят же - некрасиво. Эффект такой ступенчатости, что в пору сказать - нет, только не это - лучше ровный слой, чем такой развернутый.

Может есть способ сделать слой красивым?

[Veseloff]

Сделать это картинкой?

[xzarxzes]

http://jsfiddle.net/Zverushka/fHBg9/3/

Ну бесят же - некрасиво. Эффект такой ступенчатости, что в пору сказать - нет, только не это - лучше ровный слой, чем такой развернутый.

Может есть способ сделать слой красивым?

http://jsfiddle.net/xzarxzes/se2mL/   -webkit-backface-visibility: hidden;

Edited April 19, 2014 by xzarxzes

[Zverushka]

@xzarxzes, восхитительно, но почему это работает?

[xzarxzes]

@xzarxzes, восхитительно, но почему это работает?

Не знаю, это какая то магия. Я на stackoverflow нашел http://stackoverflow.com/questions/6492027/css-transform-jagged-edges-in-chrome. 

 

UPD: вот этот баг https://code.google.com/p/chromium/issues/detail?id=36902, https://bugs.webkit.org/show_bug.cgi?id=39753

 

Great news. Can't wait for Chrome to fold the update in. For the time being, developers who want to use rotate on images and not see the jag city, simply apply the following CSS to the element being rotated:

-webkit-backface-visibility: hidden;

This seems to trigger the antialiasing in Webkit and will at least get redroof.com looking good in Chrome for Windows.

Edited April 19, 2014 by xzarxzes

[SelenIT]

 -*-backface-visibility: hidden — это такой современный *zoom: 1. Выделяет элемент в отдельный RenderLayer (это такой современный hasLayout) и, с достаточно большой вероятностью, переносит нагрузку по отрисовке на видеокарточку. Попутно фикся многие непонятные и нелогичные косяки (и добавляя новые временами, хоть и редко).