Вот ситуация,
В chrome, когда размер окна изменяется по горизонтали, браузер пытается округлить в большую или меньшую сторону ширину в пикселях для элементов в контейнере, основанном на процентах. Скажем, у меня есть пустая веб-страница, и я добавляю следующий код:
<div style="display: flex; width: 100%; height: 200px; background-color: blue; justify-content: center; align-items: center">
<div style="background: red; height: 50px; width: 50px;">
<div style="background: green; height: 30px; width: 30px;"></div>
</div>
</div>
По сути, у меня есть гибкий контейнер, который зависит от ширины моего окна, и у меня есть два поля в качестве дочерних элементов. При изменении размера окна поле имеет эффект «дюймового червя» или «дрожания», при котором, если вы присмотритесь, вы заметите, что ширина элементов в контейнере, кажется, увеличивается / уменьшается на пиксель. Я не сталкивался с этой проблемой на Firefox или Edge и считаю, что это связано с субпиксельным рендерингом. Кто-нибудь знает способ сгладить это при изменении размера? Вот гифка того, о чем я говорю