Ng-animate Is Not Working In Android Webview Of Samaung Galaxy S4

I'm trying to implement an animation with ng-animate for a button in an Android hybrid app in which I use WebView. The animated button is like this:

ng-animate's auto-reflow.

With ng-animate enabled, the strange things are:

• For ng-switch and ng-show / ng-hide, after the animation, the element leaving is gone, but the element entering does not appear.
• For ng-view, when a new page enters, it behaves like that the old one is still there, although not visible. When you try to click on the page, it behaves like that you are actually clicking on the old page.

My current and temporary solution:

Turn off $animate service for Samsung Galaxy phone users. When $animate is disabled, they can use the functions normally, thought without animations. Add the following code into .run function:

var s = ((functionisSamsungWebkit(ua) {
    return (ua.indexOf('SAMSUNG') != -1 || ua.indexOf('SGH') != -1 || ua.indexOf('SCH') != -1 || ua.indexOf('GT-I') != -1) && ua.indexOf('534.30') != -1;
})($window.navigator.userAgent));
console.log("Samsung Hack", s);
$animate.enabled(!s);

It's not the best solution, but one solution.

Share