Fix for viewport height change on Chrome on Android #63724
-
|
@DustinBrett and @icyJoseph, I've noticed your discussion about the viewport height change in issue #47839 I've also encountered this issue, with the React-TypeScript Vite template. I just wanted to let you know that I found a fix: adding
Read more about I still think this is a bug in Chrome, so I reported it. Read more at https://github.com/Zwyx/chrome-android-clientheight |
Beta Was this translation helpful? Give feedback.
Replies: 3 comments 4 replies
-
|
Thanks for this info. I will look into |
Beta Was this translation helpful? Give feedback.
-
|
@DustinBrett How are you getting the correct value by using |
Beta Was this translation helpful? Give feedback.
-
|
For me that initial value was the correct one most of the time, but not 100%. I was doing this after <Script id="initHeight" strategy="beforeInteractive">
window.initialHeight = window.innerHeight;
</Script>But I have since moved to |
Beta Was this translation helpful? Give feedback.
-
|
Got it :) thanks for clarifying! Out of curiosity, are you dealing with Android and iOS separately? I ask this because |
Beta Was this translation helpful? Give feedback.
-
|
I was only dealing with the issue on my own Android device as I noticed the problem when I opened my site in Incognito after having the virtual keyboard open right before the page opened. I couldn't recreate the issue on my site with iOS yet, but I only have an older iPhone. I was hoping my issue was just Chromium related. |
Beta Was this translation helpful? Give feedback.
-
|
Oh no, the issue is much more robust and more readily reproducible (happens without incognito), but it's only Android (did a lot of testing on BrowserStack). My mention of iOS was more about the behavior of the keyboard that changes when you apply |
Beta Was this translation helpful? Give feedback.
-
|
Hello. First of all, thank you for finding a solution to this. I've recently picked up NextJS and it has bugged me since the very beginning that something so trivial could be so hard to get fixed. I've luckily stumbled on your post and it has helped me get it working as it should. Just wanted to share how I did it in case other beginners like me struggle with implementing it in Next. I've added the following code to my Upon checking in DevTools, it is exactly as it should be within the meta-tag. And nevertheless, it works perfectly. Thanks again for this. |
Beta Was this translation helpful? Give feedback.
Thanks for this info. I will look into
interactive-widget. My solution usingbeforeInteractiveand tracking initialwindow.innerHeightis afaik working still, but I would be happy for a cleaner solution using meta tags.