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: 2 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.
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.