I've run into an issue with hammerjs on Chrome Android 66.
I have a side bar menu that's position:fixed, with top:0 and bottom:0. When the menu item opens, the layout is correct for when URL Bar at the top is visible and hidden. On Chrome device inspect, if I run "window.innerHeight" in the console, it will give me a height for when the URL Bar is visible and and a different height for when it's hidden. This is right because with the URL Bar hidden, the inner height should be more.
After I do a swipe, whichever state I'm in, "window.innerHeight" is locked to that height, with or without the URL Bar. This is breaking my layout because top:0 and bottom:0 is stuck to the state that where I've done my first swipe.
Has anyone come across this? Any possible solutions to make window.innerHeight (and window.outerHeight) adapt to what ever it should be again? This works fine on every other browser, only Chrome Android.
Here's a little piece of code I put together for testing. Thanks for any advice.
<html>
<head>
<meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1, maximum-scale=1">
<style>
#myElement {
background: silver;
height: 300px;
text-align: center;
font-size:30px;
}
.ex-height{
height: 400px;
border:solid 1px red;
}
</style>
</head>
<body>
<div class="ex-height">extra height for scrolling</div>
<div id="myElement"></div>
<div class="ex-height">extra height for scrolling</div>
<script src="https://hammerjs.github.io/dist/hammer.js"></script>
<script>
var myElement = document.getElementById('myElement');
var mc = new Hammer(myElement);
mc.on("panleft panright tap press", function(ev) {
myElement.textContent = ev.type +" gesture detected.";
});</script>
</body>
</html>
