Issue
When I view this page in Chrome on my mobile phone:
<!DOCTYPE html>
<html lang="en-au">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
</head>
<body>
<div style="position:fixed;bottom:0;right:0;background:#f00;width:50px;height:50px">
</div>
<div id="output">
</div>
<script>
setInterval(() => document.getElementById("output").innerHTML = `windowHeight: ${window.innerHeight}`, 37);
</script>
</body>
</html>On first load, it looks like this:
And after tapping once on the page (anywhere), it changes to:
You can see from the red box that this also affects the positioning of position:fixed elements on the page. This was the start of my investigation, and I've pared down the page to get to this point, but can't work out what I'm doing wrong!
This only happens for me on Chrome (Android), on my mobile. I've also tested in the responsive view of desktop browsers and I can't get it to happen. I'm running Chrome version 111.0.5563.116 on my mobile and it's a Huawei Y9 Prime 2019.
It also only happens on a fresh tab. If you load the page, tap once, then reload the page, the page will keep the right window.innerHeight when reloaded.
I've listed all these details because I'm fearing it may be some weird browser bug. Is it a bug? Is there a workaround? Or am I doing something wrong?
Solution
Changing the flags, or changing settings in the browser is not a good practice when developing a website, because most of the users don't change flags, and/or don't change their browser's settings, or customize them that much. If they do, they are aware of them. And so, for the website to work for everybody, you should develop under the browser's state/condition as it is, out of the box - downloaded, as is, in a mint condition for a standard circumstance/environment to be for development.
I'm using 112.0.5615.47. and I couldn't replicate the issue.
A workaround could be to disable the resize function with the user-scalable to no on the meta tag, like so
<meta name="viewport" content="width=device-width,user-scalable=no">
Be aware that the no-resize technique is meant for responsive web pages. If your pages are not responsive, then you should NOT disable user resizing; doing so could render your pages impossible to read on smaller devices.
Further reading: https://wp-mix.com/disable-resizing-meta-viewport/
Disabling resizing should be avoided for accessibility reasons. -- A Haworth
Second EDIT:
If a double tap(?) causes a zooming, a workaround would be to disable that, which is not the same as disabling the scale, no bad accessibility issues.
This code will basically just prevent the double tap feature from happening. The event is still triggered for every touchstart event, so just put any other functionality outside of that if statement and you'll be free of the annoying double tap zoom feature.
var time_stamp = 0; // Or Date.now()
window.addEventListener("touchstart", function(event_) {
if (event_.timeStamp - time_stamp < 300) { // A tap that occurs less than 300 ms from the last tap will trigger a double tap. This delay may be different between browsers.
event_.preventDefault();
return false;
}
time_stamp = event_.timeStamp;
});
Related post: How to disable double tap zoom feature in Chrome 30 on Android (Nexus 10)
I assume that your phone is outdated, that's causing the issue.
Third EDIT:
I now tried to replicate the issue on a phone that has Android 10 (because that is the latest version that the Huawei Y9 Prime has - according to gsmarena.com) installed on, and I can still not replicate the issue. So, it's still an open question what causes the issue.
Fourth EDIT:
Apparently, based on Bojan B's comment (
Got similar issue, but with the usage of the fullscreen API on Android Chrome 113. Going fullscreen produces a larger than expected result and it is corrected as soon as we touch the screen. The same code used to work fine for years, so we suspect it is something related to updates. The issue only occurs in portrait and the values on the Galaxy S8+ are all over the place. Screen height is supposed to be 846; initial fullscreen sets itself to innerHeight 813, and after tap, it corrects to 769.
) the issue is caused by an update, so it's some kind of bug, so, a workaround must be applied, specifically to that version.
Answered By - iorgv
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.