5 Cordova iOS Pitfalls - And how to overcome them
Tags: vue, cordova
Published: 2019-04-25 00:00:00

---
date: "2019-04-25"
title: "5 Cordova iOS Pitfalls - And how to overcome them"
published: true
category: "Cordova"
tags: "VueJS, Cordova"
cover_image: "https://www.learningsomethingnew.com/cordova-ios-pitfalls/feature_1024x500.jpg"
canonical_url: https://www.learningsomethingnew.com/5-cordova-i-os-pitfalls-and-how-to-overcome-them

---

> This is a cross post from my [blog](https://www.learningsomethingnew.com/5-cordova-i-os-pitfalls-and-how-to-overcome-them)

I recently re-wrote our [native android app](https://play.google.com/store/apps/details?id=com.cognitusapps.flamingo.dothraki) for teaching the GOT language, Dothraki, in VueJS + Cordova, and published it on the [App Store](https://itunes.apple.com/us/app/flamingo-dothraki/id1460164128)
(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:
{% youtube 6AfxsVET0V8 %}

With FastClick:
{% youtube jX8J3tcit9E %}


## 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:
{% youtube fU8ggNYmKGY %}


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

```xml
<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:
```css
{
  overflow-y: auto;
}
```

Good:
```css
{
  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.

```css
.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](https://vuejs.org/v2/guide/transitions.html):
> 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)

```xml
<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!