В настоящее время я использую JS для изменения фонового вложения CSS в зависимости от состояния браузера. Если страница прокручиваема, фоновое вложение должно быть «исправлено», иначе это должна быть «прокрутка». Это мой сценарий:
function scrollControl() {
if (document.documentElement.scrollHeight > document.documentElement.clientHeight){
document.body.style.backgroundAttachment = "scroll";
}
else{ // else, keep bg to the bottom of the page
document.body.style.backgroundAttachment = "fixed";
}
}
scrollControl() // Execute immediately
window.onload = setTimeout(scrollControl, 30) // (and 30ms after pageload for iPhone X)
window.onresize = function() {scrollControl()}; // (or on resize)
Проблема в том, что на iPhone X мне нужен setTimeout с задержкой 30 мс.
На всех других устройствах, которые я пробовал, включая iPad, он работает, но не на iPhone X. РЕДАКТИРОВАТЬ: То же самое, что и на iPhone X, происходит, когда у меня Safari на iPad в режиме «картинка в картинке».
Если я не добавлю это время ожидания, фоновое вложение будет установлено для прокрутки. Я обнаружил, что 30 мс работает, пытаясь сократить время шагами. Все более 21 мс работает, а 21 мс и ниже не работают.
Добавив вывод, я обнаружил, что для моей страницы document.documentElement.scrollHeight составляет 778 сразу после загрузки и переключается на 496 после тайм-аута. document.documentElement.scrollHeight остается постоянным на уровне 635.
На iPad .scrollHeight сначала 816, а затем 472, а .scrollHeight снова постоянный на 608.
Текущее решение для тайм-аута работает, и изменение фонового вложения после 30 мс не видно, но я думаю, что должно быть лучшее решение. Это ошибка, и кто-нибудь знает решение или это ошибка с моей стороны?