How to solve the no scrolling issue with Ionic Web View in non-Ionic Cordova iOS apps

September 01, 2019

Problem

When building a new Cordova iOS app, you’ll have to face the WebView Dilemma: Cordova’s default iOS WebView is currently UIWebView, which is deprecated in iOS, and has been replaced by WKWebView. Alas, there are quite a few breaking changes preventing a smooth switch to WKWebView in new Cordova apps.

In order to use the new WKWebView, you have to install one of two plugins:

  1. Use WK Webview Engine plugin
  2. Use Ionic Web View plugin

Both have their problems and incompatibilities, but for a recent project I’ve found that Ionic WebView works better. Except for one issue: there is no vertical scroll…

After spending too much time solving this, and chasing after a few red herrings I thought I’d write a short post about it.

Solution

By default, Ionic apps are configured with an Ionic Web View parameter ScrollEnabled = false. This is a recommended setting for Ionic apps, but when used in a Cordova app that doesn’t use Ionic, only the Web View, it might cause scrolling to be disabled as it is defined on the body level.

So, it’s a simple solution, add this to the ios platform section of config.xml:

<preference name="ScrollEnabled" value="true" />

Rebuild your ios platform, and it should work.


Written by@Jonathan Perry
Fullstack dev - I like making products fast

GitHubMediumTwitter