iframe scrolling problems in iOS iphone 5 & 6

[SEANE]

Have been working on this for some time, but still at an impasse here.

URL: http://209.95.59.111/~acquisit/blog/businesses-sale/florida-restaurant-business-listings/

Viewers cannot scroll left to right and right to left on either the iphone 5 or iphone 6. iphone 4 seems to test okay. Android tests okay. Emulators do not catch/represent the issue accurately.

iphone 6 users apparently cannot scroll l to r in either portrait or landscape mode.

iphone 5 users report l to r works in portrait mode, but not landscape.

Can anyone please help with this? What can I do to make this iframe scroll/behave on all iphones? If anyone has a 5 or 6, can you give it a spin in both portrait and landscape modes and let me know what is going on please?

Thanks.

SeanE

[Beverleyh]

Not sure but maybe this will help http://www.dynamicdrive.com/forums/entry.php?318-Iframes-on-iOS (try style.overflowX instead?)

For CSS-only, maybe something like this – you scroll the wrapper rather than the iframe – but (from memory*) it creates a double-scrollbar on desktop/ non-touch devices;

.iframe-wrap { width:100%; height:300px; -webkit-overflow-scrolling:touch; overflow-y:scroll } /* change the width + height */
.iframe-wrap iframe { width:100%; height:100% }

<div class="iframe-wrap">
<iframe src="page.htm" frameborder="0"></iframe>
</div>

*I’m on iPhone 5S at the mo so the code above isn’t thoroughly tested.

[SEANE]

Hi Beverley,

Thanks for input above, I tried both implementations. The “css only” wrapper approach is on the same URL above (I retained existing iframe treatment, so the new iframe treatment is BELOW the existing iframe). On the 4s the information disappears when I try to scroll.

…

<iframe src=”http://bbms.biz/listings/bbf-170/bus-rest.asp&#8221; frameborder=”0″></iframe>

…

The dynamic drive code is implemented below the existing iframe on this page… http://209.95.59.111/~acquisit/blog/businesses-sale/treasure-coast-business-listings/
…

<iframe src=”http://bbms.biz/listings/bbf-170/bus-reg.asp&#8221; style=”position: absolute; width: 100%; height: 100%” frameborder=”0″ onload=”var iOS=/iPad|iPhone|iPod/.test(navigator.userAgent)&&!window.MSStream; if(iOS) {this.parentNode.style.webkitOverflowScrolling = ‘touch’; this.parentNode.style.overflowY = ‘scroll’;}” ></iframe>

…

Neither one seems to be working properly (at least on the 4s). Would you mind taking a peek on your 5s and see what is happening?

Thank you.

SE

[Beverleyh]

I’m not sure what exactly I’m looking at/what is supposed to be scrollable (where a frame stops and starts). Can you make a simplified page and indicate very obviously, like “pink frame” and “yellow frame”?

[SEANE]

Sorry I’m not be clear here, let me back up a bit. The problem is that I cannot get the iframe content (which is a table with biz listings) to scroll on iphone 5 and 6 devices when held in either portrait and landscape modes. Some people have reported that they can scroll up/down on the iframe but not l/r on the iphone 5 and no scrolling at all on the iphone 6. Android looks fine as tested.

So now I have attempted to implement your two suggestions above. I have now created pages with only those two implementations. Disregard any previous URLs to check. I do not have a 5 or 6 for testing…so if you and anyone else could test them out, I would appreciate it.

The first (dynamic drive approach) is here:
http://209.95.59.111/~acquisit/blog/iframetest1/

The second (your css-only suggestion) is here:
http://209.95.59.111/~acquisit/blog/iframetest2/

Thank you again.

[Beverleyh]

Both demos scroll vertically and horizontally on iPhone 5s

[SEANE]

Thank you. I’m quite surprised by this. Do they scroll in both portrait and landscape modes?

[Beverleyh]

Yes. Fine both ways.

[Author]

Posts