Я уже давно борюсь с этой проблемой. Эту проблему можно увидеть на мобильных устройствах (Android и iOS), некоторые устройства могут быть немного увеличены. На ПК я также могу воспроизвести эту ошибку в браузере Chrome при переключении в мобильный режим. Ниже приведен код, используемый для воспроизведения ошибки:
<!DOCTYPE html>
<html lang="en">
<head>
<style>
.top {
height: 100px;
background-color: #553213;
}
.middle {
height: 100px;
background-color: #553213;
}
.bottom {
height: 100px;
background-color: #553213;
}
</style>
</head>
<body>
<div style="width:300px; height: 300px">
<div class="top"></div>
<div class="middle"></div>
<div class="bottom"></div>
</div>
</body>
</html>
Ожидаемый результат будет div, который выполняется с цветом # 553213. Однако на некоторых мобильных устройствах они отображают дополнительные линии (или промежутки) между этими тремя элементами.
Ом мой айфон
На моем ПК, используя браузер Chrome с мобильным режимом
Кто-нибудь знает, что здесь происходит? Буду очень признателен за любые идеи о том, как это происходит и как это исправить.