Фиксированный элемент позиции независимо от адресной строки браузера на мобильном телефоне

Question

Рассмотрим эту разметку:

body {height: 300vh;} /* just for demonstration */
#demoBtn { position: fixed; left: 0; top: calc(100vh - 100px); }

<button id="demoBtn">Button</button>

При просмотре на моб. кнопка перемещается вверх во время прокрутки. Он перемещает величину высоты адресной строки.

Я хочу исправить положение этого элемента независимо от адресной строки.

Я видел (очень) связанный вопрос и пытался применить его к этой разметке так:

const btnScrollStyle = document.querySelector('#scrollStyle');
window.addEventListener('resize', function() {
  btnScrollStyle.innerHTML = '#demoBtn { position: fixed; left: 0; top: calc('+window.screen.height+' - 100px); }';
});

body {height: 300vh;}
#demoBtn {position: fixed; left: 0; top: calc(100vh - 100px);}

<style id="scrollStyle"></style>
<button id="demoBtn">Button</button>

Кажется, это что-то делает, и я думаю, потому что window.screen.height равно 100vh ...

Любая помощь более чем приветствуется!

Обратите внимание, что для того, чтобы увидеть эту проблему, нужно протестировать ее на мобильном устройстве, поскольку браузеры для настольных компьютеров (с режимом разработчика и без него) не получают этот «фрейм» из адресная строка.