One issue that stands out is the scroll container being a div instead of the body. This is causing problems with Google Chrome and iOS not remembering the scroll position of the div when users navigate to another page and return.
The relevant CSS code looks like this, with the scroll container defined as #container:
* {
margin: 0;
padding: 0;
}
html {
height: 100%;
}
body {
height: 100%;
overflow: hidden;
}
#container {
height: 100%;
overflow: auto;
}
You can view a demo on jsFiddle here. To reproduce the issue in Google Chrome and iOS, try scrolling the content halfway (or any other visible length), then click on a hyperlink to navigate to another page before using the browser's Back button to return.
Is there a straightforward solution to make Google Chrome and iOS remember the scroll position like Firefox does?
== EDIT responding to an answer ==
I have included a simple .html file below to test if any code within the onbeforeunload event works:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<script>
window.onbeforeunload = function () {
alert('Are you sure');
}
</script>
</head>
<body>
<div id="container">
<p><strong><a href="http://stackoverflow.com/">Go to Stack Overflow</a></strong>. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas laoreet imperdiet diam, in sodales velit porta eget.</p>
</div>
</body>
</html>