Почему window.pageYOffset не правильно показывает в мобильных браузерах?

Question

[Анатолий]

Делаю липкий блок, который смещается в зависимости от прокрутки экрана.
В десктопных версиях все прекрасно работает, но на планшете (Chrome 70.0.3538.80) блок часто дергается (замирает, а потом совершает рывок), а также блок заезжает на другой блок, из-за не правильно расчета. Бывает считает все верно, но почти всегда браузер врет, как с этим бороться?
Проблема именно в window.pageYOffset, может и в других параметрах, но этот точно врет.

Если полностью прокручиваю страницу, то получаю значения:
Прокручено: 2388px, экран: 569px, а высота всей станицы 3052px, получается, что:
3052-569-2388=95px
Откуда берутся эти 95px?

PS. Имитировал мобильные устройства в Chrome (F12) - проблему не обнаружил. Т.е. проблема только в мобильных версиях, и разрешение экрана не играет никакой роли.

Code

<script>
out_size();
window.addEventListener('scroll', out_size);
window.addEventListener('resize', out_size);

function out_size(){

/* Высота страницы */
var scrollHeight = Math.max(
  document.body.scrollHeight, document.documentElement.scrollHeight,
  document.body.offsetHeight, document.documentElement.offsetHeight,
  document.body.clientHeight, document.documentElement.clientHeight
);

/* Высота футера */
var footerHeight = document.querySelector('footer').clientHeight;

/* Прокрутка страницы */
var scrollPos = window.pageYOffset;

/* Экран */
var heightBrowser = document.documentElement.clientHeight;


document.getElementById('demo').innerText = window.innerWidth + ' x ' + window.innerHeight +
scrollHeight +	'  футер ' + footerHeight + ' Прокрутка: ' + scrollPos + ' Экран: ' +		heightBrowser;
}
</script>

<p id='demo' style='position: fixed; bottom: 0; right: 0; padding: 2px 5px; font-size: 12px; z-index: 999; color: #000; background-color: rgba(255, 255, 255, .75);'></p>

Answer 1

[Анатолий]

Проблема заключается в том, что шапка браузера в мобильных версиях динамична выезжает/заезжает, поэтому и происходит весь этот без предел.

Решил перейти на position: sticky, в принципе основные браузеры проверенные мной, даже на старом телефоне адроид 4.4 прекрасно работают, не говоря о современных гаджетах.

javascript раз уже написал, оставлю его исключительно для IE11, остальные десктопные браузеры нормально работают.

Вопрос закрываю.

---------------------------------------------------

Спустя 2 дня:

Реализовать что-то с помощью position sticky, к сожалению так и не удалось. Все дело, в том что он работает не так как я предполагал, а именно если указать "top: 0", то блок будет находится вверху (не перематываясь), пока есть свободное пространство внизу его родителя, потом он прокручивается вверх. Но вот "bottom: 0" работает не так как я предполагал, я думал, что блок "промотается" вниз, а далее будет ждать когда закончится свободное пространство родителя. Но это не верно! Bottom работает схематично так:

<родитель>
  <блок_пустышка></блок_пустышка>
  <блок_стики></блок_стики>
</родитель>

блок_стики проматывается как и предполагалось вниз, но не до конца родителя, а до конца блока_пустышки, при этом он находится над блоком пустышкой.
Когда высота блока_пустышки заканчивается, то он подцепляется к нему паровозиком и улетает вверх, даже не дождавшись когда закончится свободное пространство родителя. Если блока_пустышки нет, то блок_стики будет cверху, точно также как, если бы свойство "position: sticky" ему не задавали бы совсем.

Попробовал скрипт leafo.net/sticky-kit но на мобильных браузерах он ведет себя очень плохо, при скроле страницы, плавность отсутствует, и из-за плавающей шапки браузера, все те же проблемы, что и с моим скриптом.

Вывод сделал такой, что верну свой скрипт на десктопные браузеры, а на все мобильные просто забью.

Мой скрипт: https://codepen.io/workcode/pen/RqwpzM
Пример "position: sticky": https://codepen.io/workcode/pen/JeYaOx