WKWebView support for Meteor iOS apps

[1nsaneinc]

Just came across http://practicalmeteor.com/drastically-improving-the-performance-of-your-meteor-ios-app-with-wkweb%E2%80%8Bview/

Is WKWebView already implemented in Meteoric?
(sorry if this is a dumb question)

I did try using Ronen Babayoff's package and saw a significant drop in memory usage of my Metoric iOS app. But there are other minor issues that showed up - the usual keyboard sliding glitches upon text entry, status bar overlaps etc.

Any pointers/suggestions on how to go about handling these issues please?
Thanks

[Tarang]

I didn't see the keyboard sliding issues but there's another one to add:

Scroll bars: they shouldn't be visible like on a UIWebView. They show up when you scroll then hide when you don't similar to the OS X default behaviour.

[Tarang]

@1nsaneinc I might want to point out if you run the app using meteor run ios the status bar issue isn't there. So its not likely that the status bar issue is a meteoric issue.

[1nsaneinc]

@Tarang I have attached a comparison, running the app on an iPhone 5.

[Tarang]

@1nsaneinc Could you check if the behaviour is different if you use meteor run ios.

I've discerned the behaviour is different (More details here: practicalmeteor/meteor-wkwebview#1)

[1nsaneinc]

@Tarang Tried meteor run ios
The status bar issue isn't there. But the keypad still pushes the whole screen over the top.

[Tarang]

@1nsaneinc Not sure what to do about the keyboard issue but there is a quick fix (that forces it not to move) still feels un natural:

.content.overflow-scroll { bottom: 0px !important; }

[Tarang]

@1nsaneinc If you have content over a page long does yours show scroll bars when you scroll?

[woniesong92]

+1, is there any update on this?

[sweetticket]

+1

[krishnaff]

Did anyone figure out a fix for this please?

I realized, if you run with meteor run ios-device --production, the iOS statusbar works perfectly i.e., has the same color as the app header bar.

But the real problem still, is that the entire header section disappears over the top whenever the keyboard is in focus. Even the input gets pushed too far high and an empty white area is seen above the keyboard.

[1e0ng]

I'm getting the same problem as @insaneinc01

[danlg]

Did you manage to make it work with meteor 1.3 which ships WKWebview by default ?

[krishnaff]

Hey @danlg
With Meteor 1.3, it works fine. The last version of meteoric:ionic 0.2.0 seems to fix the header going out of screen issue. The keyboard has become a lot more composed and predictable with WKWebview in 1.3.

But there are minor issues with the keyboard, I don't have a concrete fix, but here's what I'm doing:

When keyboard shows up, and if its messing up elements above it, or creating extra space above it:
Make sure the view is scrollable. Add 'overflow-scroll' class to ionContent if necessary.

When keyboard hides but leaves behind empty space:
Just doing $(".content.overflow-scroll").css("bottom", "0px") is messing up selection picker views somewhere else in the app, so had to handle it only when the Keyboard is visible -

window.addEventListener('native.keyboardhide', keyboardShowHandler);

function keyboardShowHandler(e){
    Meteor.setTimeout(function(){
         if (!cordova.plugins.Keyboard.isVisible) {
            $(".content.overflow-scroll").css("bottom", "0px")
        }
    }, 300)
}

Native keyboard Left-Right Arrows on iOS - moving from field to field using these arrows sometimes makes a weird jump. I realised <form></form> around the input fields is necessary to ensure these arrows behave properly.