CSS transform искажает элементы?

Question

[thehighhomie]

Почему при применении css свойств transform, к примеру tranlate, scale, элементы искажаются?
Даже при том же translate для простого текстового блока или кнопки размывает ее, похоже на потерю фокуса, не говоря уже о картинках.
Копался во всяких плагинах, например в этом tympanus.net/Blueprints/PageStackNavigation там все круто, но я не нашел ничего такого чтобы я не знал, все по дефолту, но в плагине ничего не размывается.

Помогите пожалуйста понять как это решить. Почему так происходит?

Answer 1

[Денис Инешин]

Обычно проблема в координатах. Легкий эффект блюра появляется, когда элемент выпадает из стандартной пиксельной сетки. Для элементов, к которым применен трансформ, нужно обязательно за этим следить.

Почему это происходит? Затем чтобы обеспечить плавность анимации (особенно медленной, когда сдвиг происходит всего на пару пикселей).

Как бороться? Всегда следить чтобы все координаты были четкими в пикселях (для этого нужно их округлять при вычислениях и стараться не использовать проценты без нужды).

Comments

[thehighhomie]

спасибо. а как округлять из css то? или без js не обойтись? округлять проценты? к примеру elem.style.transform = 'translate3d(0,0, ' + parseInt( 50% ) + ')' примерно так?

[Денис Инешин]

thehighhomie: имеется в виду именно на JS. На CSS так четко управлять нельзя, но можно примерно заранее подсчитать. Например размер вашего блока 200 пикселей, если сдвинуть его влево на 50% то все будет нормально. НО! Если ширина блока например 249 пикселей, то сдвиг влево на 50% приведет к блюру и вы никак это не округлите. В таком случае поможет только сдвиг на четкое кол-во пикселей.

[thehighhomie]

Денис Инешин: спасибо большое) а как например со scale, то же самое?)

[Денис Инешин]

thehighhomie: ну да, нужно всегда прикидывать размер искажения, стараться чтобы углы были достаточно правильные, вроде 0-45-90, ну и много смотреть на глазок. В целом эта проблема рано или поздно уйдет в прошлое, на ретина экранах, где пиксельная сетка гораздо мельче, таких проблем не видно.

[thehighhomie]

в случае с rotateY не помогает, вообще ничего не помогает) размыто все, даже если метрики округленные

[Денис Инешин]

thehighhomie: на то он и ротэйт, попробуйте совет из второго ответа, вдруг доп. оптимизации помогут. Кроме того, попробуйте вращать изображение БОЛЕЕ высокого разрешения, чем номинальное.

Answer 2

[Василь Бойко]

Вот решение:
Почему после transform: rotate будто размытий получился контент: фото, текст, бордеры и т.д.?

Comments

[thehighhomie]

не помогает в случае с rotateY. .box { rotateY(40deg); will-change: transform; }

[thehighhomie]

все равно искажает(