Вот как работает сглаживание.Когда ваш div отображается в масштабе 100%, он всегда будет иметь высоту 200px.Последний ряд пикселей из верхнего div будет совершенно непрозрачным, как и первый ряд пикселей из нижнего div.
При отображении в другом масштабе (потому что вы эмулируете другое устройство или потому что выувеличение / уменьшение), если высота div приводит к десятичным пикселям, Chrome отображает полупрозрачный пиксель, который получает прозрачный слой от каждого из div в соответствии с положением предела.
Однако две прозрачные пленки не делают его непрозрачным !Поэтому, поскольку фон имеет белый цвет, эта линия пикселей немного ярче.
Чтобы предотвратить такое поведение, вы можете добавить
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, minimum-scale=1.0">
в тег <head> вашей страницы,который отключает возможность увеличения / уменьшения на большом количестве устройств.
Подробнее о адаптивном метатеге в этой статье .
Если вы хотите убедиться, что белая линия никогда появляется, вы можете добавить margin-top: -1px к нижнему или margin-bottom: -1px к верхнему.Я также советую против отключить увеличение / уменьшение, что значительно ухудшает удобство использования.
Chrome никогда не применяетсяэто объясняется отрицательным запасом, поскольку он математически некорректен и нарушает другие случаи, когда приближение прозрачности работает идеально.Справедливости ради, на самом деле является лучшим оптическим приближением для субпиксельного рендеринга.