I’m developing telegram mini app via Taiga UI and I think that I lost something with viewport configuration etc.
Please help me fix problem with gap in the bottom, while I’m using telegram mini app on iPhone.
First picture is app screen. Second is bottom part only.
Update: If you are strugging with this problem or cannot restore viewport after opening keyboard, this is your answer.
This problem stays in my head for a while. After researched carefully, I think the reason is more complex, it’s about scrolling behavior and the weird webview of ios.
This is a more “safe” to use solution. I will not explain much since it’s a really complicate use-case.
Firstly, please add a meta tag to your HTML page to prevent viewport scaling (and some other things):
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no,shrink-to-fit=no,viewport-fit=cover">
Put it into <head> tag of your index file and forget about it.
Then, in entry file of your project (for example in vite is main.ts or index.ts or whatever), use this:
if (window.visualViewport) {
window.visualViewport.addEventListener('resize', () => {
document.body.style.height = window.visualViewport.height + 'px';
});
}
// This will ensure user never overscroll the page
window.addEventListener('scroll', () => {
if (window.scrollY > 0) window.scrollTo(0, 0);
});
What does this do? It will listen for changes in viewport size (even with the changes by opening a Virtual Keyboard), then apply the correct size into body of HTML.
You also want to set some more css, note that you have to change it to match your project, I’m using React Vite with default preferrences:
html, body, #root {
width: 100%;
height: 100%;
overflow: hidden;
overscroll-behavior: none;
}
#root {
/* Preserve scrolling behavior */
overflow-y: auto;
}
Cheers
2