2

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.

Filip
  • 1,824
  • 4
  • 18
  • 37

2 Answers2

2

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.

Sam Tyurenkov
  • 430
  • 4
  • 19
  • Thanks this is something I havent tried yet. The iframe itself it content I dont have control over but I guess I could inject JS from the app. Do you have any tips how to find such event listeners? – Filip Sep 11 '19 at 10:33
  • The simpliest way would be to try to load a completly different page in iframe, that doesn't have javascript and see if it scrolls well. As for the host page that you own - just check resources manually, or try a different host page as well. I'll update the answer. – Sam Tyurenkov Sep 11 '19 at 10:39
  • Yeah I tried another pages and they scroll fine, I also tried loading just the URL that is source for the iframe (so my page was not even loaded) and it did not work either. – Filip Sep 11 '19 at 10:41
  • You can't inject JS in a page you don't own. – Sam Tyurenkov Sep 11 '19 at 10:42
  • 1
    Also try to simulate Safari user-agent in your WebView, so the destination page thinks it's loaded in Safari. – Sam Tyurenkov Sep 11 '19 at 10:45
  • If I load it in `WKWebView` I can then evaluate JS on the page, no? But I am not sure what that would do with the iframe. – Filip Sep 11 '19 at 10:47
0

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)

Soc
  • 7,425
  • 4
  • 13
  • 30