Итак, я заметил кое-что своеобразное, работая над личным проектом только сейчас.
Следующий код вызовет проблему с положением элемента div в портретном режиме, если телефон переключается назад и впередмежду ориентациями.
Вместо того, чтобы div сидел неподвижно или располагался в нижней части экрана, div будет плавать выше и вообще не касаться нижней части экрана.
html {
width: 100%;
height: 100%;
border-bottom: solid blue 3px; box-sizing: border-box;
}
div {
width: 200px;
height: 200px;
position: fixed;
bottom: 0;
box-sizing: border-box;
border: solid black 3px;
background: white;
}
<div></div>
При устранении этой проблемы я обнаружил следующие вещи:
- Если вы измените
height из html из100% до 110%, проблема решается сама собой. 110%, скорее всего, не является точной точкой разрыва, но я знаю, что div не коснется нижней части экранадаже если height из html установлено равным 105%. - Размеры квадрата не имеют большого значения.Я проверил на
10px, 50px, 100px и 200px, и он полностью исчезает, если установить 10px, но ведет себя так, как я описал выше для всех других значений.
Примечательно, что я тестирую это не на iPhone 6s, а на обычном iPhone 6.
Я призываю других пользователей протестировать это для себя и поделиться своим опытом!
Существует ли эта ошибка на других устройствах?В других версиях iOS?
Есть ли способ исправить это, кроме увеличения height из html до 110%?