I'm currently in the process of developing a website that requires a specific div element to be horizontally scrollable if its content exceeds the screen size. This functionality works smoothly on most browsers, except for Safari:
Scenario: When the page is loaded in portrait mode on an iPad or iPhone, and the content within the scrollable div is larger than the screen, scrolling works as expected. However, upon rotating the device to landscape mode where the content now fits within the screen, the scrollbar disappears. Reverting back to portrait mode, the scrollbar reappears but scrolling stops functioning. A page refresh is then required to regain scroll functionality.
Issue Replication:
You can replicate this scenario using the following fiddle: http://jsfiddle.net/v7wvbupd/2/. The issue persists with Apple products but not with Android devices.
While the scroll behavior performs well on mobile browsers other than Safari, I've attempted various solutions from different sources without success.
Attempts That Failed:
- Setting the position of the body to relative.
- Including
html, body {overflow-x:hidden;}. - Applying
to the scrollable div.-webkit-overflow-scrolling:touch; - Using
!importantwith
and-webkit-overflow-scrolling:touch;overflow-x:autoto prevent overriding when rotated.
Additionally, I explored JavaScript fixes like adding a timeout attribute, but these attempts also proved ineffective:
<script>
$("[scrollable]").css("-webkit-overflow-scrolling", "auto");
window.setTimeout(function () { $("[scrollable]").css("-webkit-overflow-scrolling", "touch") }, 100);
</script>
Most resources addressing scroll issues focus on total failure rather than my specific dilemma which only occurs upon rotation from landscape to portrait.
My Simplified Structure:
<html>
<body>
<div id="header" class="col-md-12"></div>
<div class="scrollableDiv">
<div id="footer" class="col-md-12"></div>
</body>
</html>
Current CSS Implementation:
html {
overflow-y: scroll;
height: 100%;
width:100%;
}
body {
padding-top: 10px;
padding-bottom: 20px;
height: 100%;
width: 100%;
}
.scrollableDiv {
overflow-x: auto !important;
width: 800px;
overflow-y: hidden;
padding-bottom: 55px;
-webkit-overflow-scrolling: touch !important;
}
.col-md-12{
width: 100%;
}
EDIT
The site utilizes AngularJS as part of its solution. I ruled out JavaScript wrapping as the cause after testing, indicating a Safari-specific problem.