Почему при изменении ширины экрана элементы наезжают друг на друга?

Question

[skorotkostvolnyy034]

Сделал два идентичных элемента, одному из которых присвоил rotate180. Теперь, при изменении ширины экрана, он начинает наезжать на другой. К сожалению, история применяется только к относительным значениям, кои мне и важны.

В общем, скажите, пожалуйста, как исправить?

Comments

[Вадим]

Есть такое понятие как пиксельная сетка у браузера.
И есть такая проблема как "не попадание в пиксельную (иногда говорят сабпиксельную) сетку".
Это проблема, когда, грубо говоря, элемент занимает не такое количество пикселей, какое должен, потому что в процессе вычисления его размеров на отрисовку произошло округление не в ту сторону. И относительные единицы измерения этому подвержены в большей степени.
А у Вас ещё и scale(10) стоит, что более наглядно демонстрирует проблему.

[skorotkostvolnyy034]

Вадим, я scale специально поставил, чтобы как раз и было более наглядно. То есть это никак не исправить?

[Вадим]

skorotkostvolnyy034, Мне таковых способов не известно(не значит что их нет).
Только если переосмыслить реализацию так, чтобы наперёд об этом подумать и обойти.

[skorotkostvolnyy034]

Вадим, спасибо(

[Ankhena]

В этом частном случае поправить можно так

transform: rotate(-180deg) translate(100% 100%);
transform-origin: left top;

Не факт, что это поможет в вашей реальной задаче, но можно подумать в аналогичную сторону.