Swiper out of its place


I have dynamically generated swiper which has a problem of when selecting a textarea on certain page lengths the footer bar covers the text area.

I finally found that scrollIntoView fix the issue for me
document.activeElement.scrollIntoView({block: "center", inline: "center"});
but as the keyboard opens the whole page shifts to the left (including nav bars) and you can see the other page. and the page stays in that broken shape.

I have tried to solve it but I just found that .swiper-container overflow can fix it, however overriding it is not helping! I tried to do through js I can solve it for example when start typing and the next time it doesn’t affect it!

disabling and enabling the overflow in the .swiper-container class manually is the only way and I can’t understand whats happening?

In fact, any manual manipulation of the .pages class fixes the screen. so is there something I can call to sort out the swiper? or any other ideas to solve the main problem?