I'm facing an issue where I am unable to get the mobile Safari browser to scroll within an iframe on iOS, instead of extending the document to display the entire content.
To provide some context, my document structure looks like this —
When attempting to horizontally scroll on nav.html with overflow-x: scroll and '-webkit-overflow-scrolling: touch;', it doesn't work when testing on iOS 7 on the iPad 2. Even testing in the iOS simulator has not yielded any success.
The problem arises on the product pages accessible here — .
The above link is an iFrame wrapping the body of the main website. In the main website, there are index.html page with two iframe containers; one for the product (iframe[name='viewer']), and another for the navigation (iframe[name='nav']). The viewer iframe has overflow: auto set and works on overflow-y content. However, for the nav, the content extends beyond the set width container, overflowing the entire document, rather than just the nav within the div.nav in the nav iframe.
This is how my index.html markup looks with both iframes (product/[product_number].html and nav.html) —
<body class="cat">
<div class="back-nav-cat"></div>
<!-- Navigation Links -->
<div class="cat-navigation back" onclick="location.href='../index.html';">BACK</div>
<!-- Viewer -->
<iframe src="products/P-715.html" frameborder="0" name="viewer" width="2560" height="1195" scrolling="no"></iframe>
<!-- Nav -->
<iframe src="nav.html" frameborder="0" name="nav" width="2560" height="245" scrolling="yes" style="position: absolute;"></iframe>
</body>
If anyone knows 1) the cause of this issue, and 2) a proven solution, your help would be greatly appreciated.
Just a heads up: the domain is a test domain for our agency, so approach with caution (some have mistaken it for a virus.... which was definitely not our intention).
Thank you in advance.
EDIT:
Credit to Ryan Wheale, all I needed to do was set the width of my nav iframe to width: 100%. Additionally, I wrapped the iframe in a div with overflow-x: scroll; and
-webkit-overflow-scrolling: touch;