WKWebView Inside UIScrollView: Scrolling Conflict

Question

Context

I have a WKWebView that I programmatically embed in a UIView and this UIView is embedded in a UIScrollView.

To visualize:

and here is the simplified version of what I have done:

UIScrollView
|
+---- UIView
|    |
|    +-- UIButton
|    |
|    +-- UILabel
|
+---- UIView
     |
     +-- WKWebView

I don't want the WKWebView to scroll and I have disabled it by injecting the following script on the page.

document.ontouchmove = function(event) { event.preventDefault(); }

---

The problem

Currently, The scrolling doesn't work when I tapped inside the WKWebView. But once I tapped back inside the UIView above, I can scroll again. I've attached a GIF below of what happened. The red section is the WKWebView and the green section is the UIView.

---

What I've done

1. I have disabled the scrolling using scrollEnabled and it doesn't work since I can still scroll the WKWebview.

   webView.scrollView.scrollEnabled = false
   webView.scrollView.bounces = false
   

2. Inject the following javascript once the web page is loaded (Current solution)

   document.ontouchmove = function(event) { event.preventDefault(); }
   

3. Use a static UITableViewController for the view, but I still encountered the same problem.

---

References:

• SO - Why Shouldn't A UIWebView Be Placed in a UIScrollView?
• SO - Disable Scroll on a UIWebView allowed?

Answer 1

I've faced same issue. The workaround for me was setting content inset on ScrollView like this:

scrollView.contentInset = UIEdgeInsetsMake(FLT_EPSILON, FLT_EPSILON, FLT_EPSILON, FLT_EPSILON);

Looks like there is some optimisation in WKWebview which prevents parent scrollView to receive gestures when it's size fits within scrollview size. Setting insets even with the size of FLT_EPSILON makes the WkWebView pass gestures.

It works only for WKWebView inside UIScrollView. When there is UIScrollView inside other UIScrollView this workaround is not needed.