Что вы делаете, когда блоки не сходятся при относительных размерах?

Question

[Дмитрий Филимонов]

Если размеры относительные и используется transform, то мы можем получить несовпадение размеров элементов.

jsfiddle.net/opbfzkun - в данном примере используется transform по hover'у, размеры родительского блока выставлены в vw/vh, дочерние - в %.

Иногда я могу получить вот такое:

Или такое:

А вдруг это из-за vw/vh? Нет. jsfiddle.net/x7ztp5vd - размеры родительского блока в px, но:

А если выставить более приятные размеры родительского блока - jsfiddle.net/r3nu9hbb? Да, конкретно у меня стало все хорошо:
Скрины сделаны в Chromium при разрешении 1920x1080 точек. Подобное было замечено так или иначе во всех популярных браузерах свежих версий (Chrome/Chromium, Firefox, Safari, Opera). В IE10 у себя под виртуалкой повторить не смог на примерах выше, однако не факт, что там все хорошо. Это довольно сложно повторить, поэтому в примерах надо поиграться, не при всех значениях размеров это проявляется.

В примерах есть класс .t, который можно добавить к .item: возможно, транзишны усугубят эту "фичу".

Возможно, данная проблема проявляется также не только с transforms, а с любыми другими свойствами. Лет 7 назад это было актуально, но сейчас браузеры округляют пиксели очень интеллектуально, и сделать косяк в простом примере не так-то просто. Мне кажется, что я встречался с ними на сайтах, где было много SVG, анимаций (не transform), но не могу сходу привести простой и показательный пример, очищенный от всего лишнего.

Особенно такие пиксельные проблемы чувствуются на сайтах, которые супер-адаптивные или используют техники, которые заставляют выставлять абсолютно все размеры в rem/em/%. Об агрессивном использовании такого подхода я уже писал однажды (если решите читать, обязательно смотрите комменты), где упомянул на всякий случай про возможные проблемы с округлением размеров.

И у меня есть несколько вопросов:

1. Повторяется ли баг с относительными размерами и transforms, точно ли оно мне не кажется? Не допускаю ли я очевидную ошибку?
   
2. Видели ли вы подобные проблемы? Может, оно было в сложных интерфейсах и не с transform'ами? Особенно интересуют реальные примеры веб-приложений/сайтов.
   
3. Как можно решить это, но не переводя размеры в px и не округляя их?
   

Было бы интересно узнать про то, как браузеры занимаются округлением размеров вообще, возможно, кто-то заглядывал в исходники или знает крутые статьи?

Comments

[Антон]

В мобильном сафари все ваши примеры выглядят ок, хотя тот же вебкит.

[Kano]

В ie10-11 тоже норм, сколько не пытался такого смещения получить не удалось

[Дмитрий Филимонов]

Антон: протестил в мобильном Chrome - бага имеется.

[Антон]

Дмитрий Филимонов: я бы посоветовал оформить баг в багтрекере вебкита.

[Дмитрий Филимонов]

Антон: но в Gecko такая же "бага" с транcформами имеется, хотя тоже подумывал об этом. Надо потестить еще это.

Answer 1

[Юрий Ярош]

Я сам хочу разобраться с проблемой отсутствия нормальных полифилов для относительных величин, с учётом изменения размеров и переопределением пиксельной сетки.

Вот тут достачно порезать тостер jsfiddle.net/x7ztp5vd
#toster {
width: 293px;
height: 301px; -> 300px;
}

Так как у нас берётся 25% то при масштабировании получается 1/4 пикселя которая округляется в меньшую сторону и даёт "пробел".

Проблема в подборе размеров для элементов, что бы при округлении оно всё хорошо влазило в пиксельную сетку браузера и не давало подобных артефактов. Этим грешны все существующие относительные величины в вэбките :(

p.s. если будет желание заняться разработкой полифила - пишите в скайп.

Comments

[Дмитрий Филимонов]

Насчет полифила: мне нужно лучше изучить этот вопрос, набрать больше примеров, возможно, залезть в исходники того же webkit. Нужно еще лучше протестить относительные размеры (пока на простом примере повторил только с transform, то с теми же margin/padding/width/height/etc не удается). Занимаюсь этим вопросом в фоне в связи с отсутствием достаточного времени. У меня ощущение, что встречал такой же баг, когда был указан, например, height: 5rem со странным дробным font-size (высчитанный специально в медиа-запросах), вчера пытался повторить, но не смог. Видимо, там были еще условия, либо транишны, либо те же трансформы на каком из блоков.

Пока что ощутимый баг для меня есть с transforms, все остальное я правлю с помощью препроцессоров, округляя и подгоняя размеры заранее (чтобы не было много знаков после запятой или периодических дробей, либо были, но при этом тестирую в разных браузерах). Кажется, браузеры сейчас очень хорошо округляют во многих ситуациях.

[Юрий Ярош]

Дмитрий Филимонов проблемы с выравниванием по пиксельных сетках особо заметны в различных анимациях, но непосредственно к самому Transition'у не имеют отношения, так как он выполняется уже после рендера layout'a CSSOM'a т.е. применяется к уже выровненным по сетке элементам.

[Дмитрий Филимонов]

Юрий Ярош: а можете какой пример привести?