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