Элегантно предотвращает движение неподвижного элемента при открытии виртуальной клавиатуры

Question

Для веб-приложения, которое я поддерживаю, я недавно представил фиксированную нижнюю строку меню. Через position:fixed это меню остается прикрепленным к нижней части области просмотра , когда пользователь выполняет прокрутку.

Однако, когда пользователь сталкивается с полем textarea или input и пытается focus заполнить его, виртуальная клавиатура открывается, толкая вышеупомянутую фиксированную строку меню вверх. Несколько раз этот механизм c заканчивал тем, что полностью охватывал textarea или input, что порождает огромную проблему юзабилити.

Чтобы исправить это, я написал простое чистое решение JS, в котором я установил position:fixed на position:absolute на focus и вернул его на position:fixed на blur. Решение было подробно рассмотрено в этом ТАК вопросе.

Это решает проблему до некоторой степени, но решение ошибочно c. Позвольте мне показать вам, как.

---

Следующий код реализует решение, которое я объяснил выше. Запустите фрагмент кода. Затем сфокусируйте textarea прямо под Sample text 2. Это переключает нижнюю строку меню с fixed на absolute, и это вызывает неприятный визуальный скачок. Это усугубляется, если вы попробуете то же самое в textareas ниже.

Как мне избежать неприятного визуального прыжка? В идеале я хочу, чтобы навигационная панель fixed переключалась на absolute таким образом, чтобы она продолжала прилипать к нижней части моего окна просмотра. Это возможно? Хотелось бы увидеть пример от экспертов в этом отношении.

---

var input_btns = document.getElementsByClassName('inp');// selecting all textareas or inputs for processing (e.g. making fixed bottom menu 'absolute')
for (var i=0, len=input_btns.length; i < len; i++) {
	input_btns[i].onfocus = () => {
		var bottom_nav = document.getElementById("bottom_nav")
		bottom_nav.classList.remove('fix-it');
      	bottom_nav.classList.add('abs-it');
	}
	input_btns[i].onblur = () => {
		var bottom_nav = document.getElementById("bottom_nav")
		bottom_nav.classList.remove('abs-it');
      	bottom_nav.classList.add('fix-it');
	}
}

.fix-it{
		position: fixed;
	}
	.abs-it{
		position: absolute;

	}

<div>
Sample text 1<br><br>

<textarea class="inp" style="width:100%"></textarea>

</div>
<div>
Sample text 2<br><br>

<textarea class="inp" style="width:100%"></textarea>

</div>
<div>
Sample text 3<br><br>

<textarea class="inp" style="width:100%"></textarea>

</div>
<div>
Sample text 4<br><br>

<textarea class="inp" style="width:100%"></textarea>

</div>
<div>
Sample text 5<br><br>

<textarea class="inp" style="width:100%"></textarea>

</div>
<div>
Sample text 6<br><br>

<textarea class="inp" style="width:100%"></textarea>

</div>
<div>
Sample text 7<br><br>

<textarea class="inp" style="width:100%"></textarea>

</div>
<div id="bottom_nav" class="fix-it" style="background:coral;z-index:89;bottom:0;height:56px;width:100%;text-align:center;border-top:1px solid #dddddd">
BOTTOM MENU BAR
</div>