5 Cordova iOS Pitfalls - And how to overcome them

This is a cross post from my blog

I recently re-wrote our native android app for teaching the GOT language, Dothraki, in VueJS + Cordova, and published it on the App Store
(Would love to get feedback!)

I came across some iOS-specific quirks that anyone making a cordova-ios app will probably have to face.

1. Fastclick

On the WebView cordova uses in iOS, there is a 300ms delay on every click event. This makes for a very annoying experience when left as-is. The solution to this one is very simple:

cordova plugin add cordova-plugin-fastclick

Note that there's a note on fastclick's readme saying it's no longer necessary as of 2015. Well, this is 2019, and it still is...

Without FastClick:

With FastClick:

2. Overscroll

In iOS browsers there's this bouncing effect when you scroll more than the content of the page. In a web page it might look ok, but in your SPA you don't want your content bouncing out of view with a white background coming out of nowhere (see example below).

This is embarrassing:

Luckily this too is quite a simple fix, just add the following to config.xml (why isn't this the default??)

<platform name="ios">
    <preference name="DisallowOverscroll" value="true" />
</platform>

3. Scrolling acceleration

In iOS the native scrolling has a smooth accelerating and decelerating behavior. If you have a list in your app you'll want the scrolling to behave the same, and not flat like the default you'll get with overflow auto.

Bad:

{
  overflow-y: auto;
}

Good:

{
  overflow-y: scroll;
  -webkit-overflow-scrolling: touch; 
}

4. Use GPU for animations

The cordova WebView in ios can't handle certain css transitions in a smooth way. This will cause your app to have bad perceived performance.
So if you want to slide something from left to right for example, animating the transform css property instead of left will use the device GPU and result in smooth native-like animation.

.slide-fade-enter-active {
  transition: all .3s ease;
}
.slide-fade-leave-active {
  transition: all .8s cubic-bezier(1.0, 0.5, 0.8, 1.0);
}
.slide-fade-enter, .slide-fade-leave-to
/* Notice the use of translateX instead of left/right */ {
  transform: translateX(10px);
  opacity: 0;
}

Example from VueJS Docs:
If you use a UI framework like Vuetify, animations already use this, so you're covered

5. Statusbar color:

The default is for the status bar to remain white, which will usually look weird unless your app is also mainly white. So to change it:

cordova plugin add cordova-plugin-statusbar

And in config.xml add under ios platform: (replace with your app's main color)

<preference name="StatusBarOverlaysWebView" value="false" />
<preference name="StatusBarBackgroundColor" value="#353334" />

That's it

Now you're ready for the App Store, and no one will know your app is running inside a browser. I hope.

Dothras check!

Comments

[pipboy9000]

Good tips, cool app, good job!