CODEWITHSUNDEEP
htmliosiframewkwebview
Filip
Filip

Reputation: 1864

iOS: Page with iframe does not scroll in WKWebView

In my app I am displaying website using the WKWebView component but since the website has <iframe> content, scrolling does not work. The iframe content itself registers taps and swipes but it never scrolls.

When I open the same page with Safari it works well, I can interact with iframe's content and scroll without any issues.

My iframe takes full width and height of the webpage and I added this property:

-webkit-overflow-scrolling: touch;

But it does not help. Unfortunately I cannot show the webpage in question because it contains proprietary data and is behing login screen.

I would prefer to solve this without having to modify the webpage, since Safari works fine.

EDIT: It looks like the iframe might be detecting the events and not "forwarding" them, because when there is also for example navbar on the page (that is not part of the iframe) I can swipe it and scroll. However since there is very little space on the screen, I would prefer not to have any other elements apart from iframe itself.

EDIT 2: I tried to display the page from iframe directly in the WKWebView but it still does not scroll at all. Works great in Safari.

Solution: In the end I solved the issue by changing the userAgent property of the WKWebView to match either iOS 12 Safari for iPhone or iPad depending on the device. The website in question is fairly complex regarding user interaction so I guess they were sending "incorrect" settings to the browser with the default user agent.

Upvotes: 2

Views: 2060

Answers (2)

Soc
Soc

Reputation: 7780

Try placing the iframe in a div with -webkit-overflow-scrolling which takes up the full view and make the iframe the the size of it's content.

Example from: https://coderwall.com/p/c-aqqw/scrollable-iframe-on-mobile-safari

<div style="overflow:auto;-webkit-overflow-scrolling:touch">
  <iframe src="./yxz" style="width:100%;height:100%">
</div>

You may have to get creative with resizing the iframe to match it's content (see: Adjust width and height of iframe to fit with content in it)

Upvotes: 0

Sam Tyurenkov
Sam Tyurenkov

Reputation: 440

I would look for scroll-blocking event listeners that might conditionally load. If you have some kind of touch, touchmove, click, hover javascript events they might interfere with the default logic by using e.preventDefault().

Also you need to look for such events both in framed page and host page.

Try to replace a host page and framed page to see if scroll works well with different URLs.

Upvotes: 2

Related Questions