Браузер Chrome для Android очень незначительно округляет значения PX ⇐ CSS

[Anonymous]

Я работал над веб-сайтом, на котором в заголовке логотип расположен слева на белом фоне, а навигационные ссылки расположены справа на синем фоне. Белый и синий фоны имеют наклонный переход между ними. Над заголовком также есть небольшая полоска с контактными данными. Это базовая версия дизайна — https://unique-baklava-926a7a.netlify.app/
Сайт был создан, и все выглядело нормально, пока не было протестировано на Google Pixel 7. Профессионал использования Chrome. Я заметил, что под наклонным переходом между белым и синим можно увидеть небольшой участок белого фона.
На этом снимке экрана показана проблема.


На этом снимке экрана показано увеличенное изображение проблемы. Он также показывает линию гораздо меньшего размера над элементом flex-row, через которую проходит цвет тела.
[img]https: //i.sstatic.net/yrMmig50.png[/img]

Я также заметил, что, несмотря на то, что высота дочерних элементов установлена ​​на 59 пикселей, Chrome выполняет рендеринг их в 58,996 пикселей.


У моего телефона уменьшенный дисплей размер в настройках ОС, возврат к значению по умолчанию решает проблему. Однако то же самое можно сказать и о включении уменьшенного размера дисплея и удалении элемента разделителя из DOM.
Есть идеи, как я могу решить эту проблему, не удаляя элемент разделителя или изменить настройки размера экрана устройства.
Приложение Chrome версии 131.0.6778.81 для Android.

Подробнее здесь: https://stackoverflow.com/questions/792 ... y-slightly