ng-animate не работает в Android WebView Samaung Galaxy S4

Я пытаюсь реализовать анимацию с помощью ng-animate для кнопки в гибридном приложении Android, в котором я использую WebView.

Анимированная кнопка выглядит так:

<div class="dish-like dish-like-animater">
    <img ng-hide="page.liked" class="dish-like-unliked" src="http://dev.fotodish.com/img/[email protected]" ng-click="Like()">
    <img ng-show="page.liked" class="dish-like-liked-up" src="http://dev.fotodish.com/img/[email protected]">
    <img ng-show="page.liked" class="dish-like-liked-down" src="http://dev.fotodish.com/img/[email protected]" ng-click="Unlike()">
</div>

Подробности смотрите в этой скрипте: http://jsfiddle.net/QcH8m/

Я протестировал анимацию на настольном Chrome, Samsung Galaxy S4 и Moto G. И в настоящее время анимация отлично работает во всех следующих средах:

  • рабочий стол Chrome,
  • Браузер Android («Интернет») на этом Galaxy S4,
  • Chrome на этом Galaxy S4,
  • Chrome на этом Moto G,
  • WebView на этом Moto G

Однако, когда я попытался запустить его в WebView на этом Galaxy S4, его поведение было довольно странным. В самом начале, до того, как я нажал на него, все выглядело нормально, было ли page.liked истинным или ложным. Однако, когда я нажал на нее, все просто исчезло. И произошла ошибка. Трассировка стека была такой:

03-21 16:40:32.412    6019-6019/com.fotodish.android E/Web Console﹕ TypeError: undefined is not a function
        at file:///android_asset/www/bower_components/angular/angular.js:11330:9
        at afterReflow (file:///android_asset/www/bower_components/angular-animate/angular-animate.js:1092:11)
        at Object.fn (file:///android_asset/www/bower_components/angular-animate/angular-animate.js:1585:13)
        at file:///android_asset/www/bower_components/angular-animate/angular-animate.js:450:46
        at Array.forEach (native)
        at forEach (file:///android_asset/www/bower_components/angular/angular.js:322:11)
        at run (file:///android_asset/www/bower_components/angular-animate/angular-animate.js:438:11)
        at Object.before (file:///android_asset/www/bower_components/angular-animate/angular-animate.js:471:13)
        at performAnimation (file:///android_asset/www/bower_components/angular-animate/angular-animate.js:897:16)
        at Object.removeClass (file:///android_asset/www/bower_components/angular-animate/angular-animate.js:702:11):9509
03-21 16:40:32.432    6019-6019/com.fotodish.android E/Web Console﹕ TypeError: undefined is not a function
        at file:///android_asset/www/bower_components/angular/angular.js:11330:9
        at afterReflow (file:///android_asset/www/bower_components/angular-animate/angular-animate.js:1092:11)
        at Object.fn (file:///android_asset/www/bower_components/angular-animate/angular-animate.js:1585:13)
        at file:///android_asset/www/bower_components/angular-animate/angular-animate.js:450:46
        at Array.forEach (native)
        at forEach (file:///android_asset/www/bower_components/angular/angular.js:322:11)
        at run (file:///android_asset/www/bower_components/angular-animate/angular-animate.js:438:11)
        at Object.before (file:///android_asset/www/bower_components/angular-animate/angular-animate.js:471:13)
        at performAnimation (file:///android_asset/www/bower_components/angular-animate/angular-animate.js:897:16)
        at Object.removeClass (file:///android_asset/www/bower_components/angular-animate/angular-animate.js:702:11):9509

Я использую angular 1.2.14 и angular-animate 1.2.14. В то же время другая анимация, касающаяся ng-view, работает нормально...

Настройки WebView такие:

    mWebView = (WebView) findViewById(R.id.webview);
    WebSettings webSettings = mWebView.getSettings();
    webSettings.setJavaScriptEnabled(true);
    webSettings.setAllowUniversalAccessFromFileURLs(true);
    webSettings.setDatabasePath("/data/data/" + this.getPackageName() + "/databases/");
    webSettings.setDomStorageEnabled(true);
    mWebView.setWebChromeClient(new WebChromeClient());

Galaxy S4 работает под управлением Android 4.3, оригинальной версии Samsung. Moto G также работает под управлением Android 4.3.

Строка UserAgent этого Galaxy S4:

Mozilla/5.0 (Linux; U; Android 4.3; en-us; SAMSUNG-SGH-I337 Build/JSS15J) AppleWebKit/534.30 (KHTML, like Gecko) Version/4.0 Mobile Safari/534.30

Кто-нибудь знает, что произошло?


android-webview angularjs samsung-mobile ng-animate
person Tong Shen    schedule 21.03.2014    source источник
comment
Звучит как чушь, вы можете начать копаться в том, какие версии движка рендеринга (WebKit или, может быть, Blink) используются между различными устройствами, чтобы немного сузить его, а затем начать искать связанные проблемы и обходные пути для этого конкретного версия двигателя.   -  person shaunhusain    schedule 22.03.2014

Ответы (1)


arrow_upward
2
arrow_downward

Как я проверил, ng-animate кажется очень несовместимым с WebView мобильных телефонов Samsung Galaxy с Android 4.3 или ниже. Android 4.4 Galaxies с Chrome WebView выглядит нормально. Кажется, что-то не так с auto-reflow ng-animate.

При включенном ng-animate происходят странные вещи:

  • Для ng-switch и ng-show/ng-hide после анимации выходящий элемент исчезает, но входящий элемент не появляется.
  • Для ng-view при заходе новой страницы ведет себя так, что старая все еще там, хотя и не видна. Когда вы пытаетесь нажать на страницу, она ведет себя так, как будто вы на самом деле нажимаете на старую страницу.

Мое текущее и временное решение:

Отключите услугу $animate для пользователей телефонов Samsung Galaxy. Когда $animate отключен, они могут нормально использовать функции, но без анимации. Добавьте следующий код в функцию .run:

var s = ((function isSamsungWebkit(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);

Это не лучшее решение, но одно из решений.

person Tong Shen    schedule 26.03.2014