三星S6 Webview CSS动画问题 [英] Samsung S6 Webview css animations issue

问题描述

我正在研究用cordova/phonegap编写的应用程序.
现在我遇到了一个奇怪的问题-在三星s6 css动画中无法正常工作.

例如-我有一个使用css制作动画的微调器.
每次启动应用程序微调器时都不想隐藏.
我还使用CSS动画隐藏了一些元素.
启动应用程序后，该元素不会滑动.

奇怪的是，这些错误仅在第一个应用程序启动时发生，每当第二次应用css动画时它就会起作用.
触摸屏幕也很简单，可以使动画开始起作用.

I'm working on application written in cordova/phonegap.
Now i have some strange issue - in Samsung s6 css animation does not work properly.

For example - i have a spinner animated with css.
Every time when launching application spinner doesn't want to hide.
I also hide some element using css animation.
And after launching application this element doesn't slide.

What's strange these bugs occurs only on first application launching, every second time when css animation is applied it works.
Also simple touching the screen makes animation starting to work.

Android版本是5.1.1，webview是最新的46.0.2490.
我不太确定，但认为此错误是在Google Play上更新WebView之后发生的.

Version of Android is 5.1.1, webview is the newest 46.0.2490.
I'm not quite sure but assume that this bug occurs after WebView update from Google Play.

我感到无能为力:(.
我的问题是-我应该在哪里报告该问题?
对于S6以外的任何其他设备，都不会发生错误，因此我认为Google Play不是合适的地方.
有什么想法吗?

I feel powerless :(.
And my question is - where should i report that issue?
For any other device than S6 bugs don't occur, so Google Play is not proper place i suppose.
Any ideas?

推荐答案

在Samsung S6 5.1.1 Webview的Cordova应用中，CSS动画存在完全相同的问题.我们首先在微调器中注意到了它，但它似乎会影响各种CSS动画.

We have the exact same issue with CSS animations in our Cordova-app on Samsung S6 5.1.1 webview. We noticed it first with our spinner, but it seems to impact all kinds of CSS animations.

这似乎是Android System Webview版本46.0.2490.76中的错误. 降级到以前的版本时，一切正常，当我们手动安装更高版本的Webview(在Google Play中尚不可用)时，一切也正常.

This seems to be a bug in the Android System Webview version 46.0.2490.76. Everything works fine when downgrading to the previous version, and it also works fine when we install a later version of the Webview manually (not yet available in Google play).

在找到新版本之前，我们已经找到了一种hacky解决方法，该方法目前似乎可以正常工作.

Until a new version is in place we have found a hacky workaround that seems to work fine for now.

在JS中，我们通常在spinner.stop()函数或类似的代码中创建一个伪造的触摸事件:

From JS we create a fake touch-event, typically in our spinner.stop() function, or similar:

        
            if (Modernizr.touch) {
                var e = document.createEvent('TouchEvent');
                e.initTouchEvent();
            }
        
    

这与用户滑动或点击屏幕并重新粉刷屏幕具有相同的效果.

This have the same effect as when the user swipes or taps the screen, and the screen repaints.

使用modernizr检查触摸事件是否可用(或实施您自己的检查)，以避免在非触摸设备(例如台式机)上出现错误消息.

Use modernizr to check if touch events are available (or implement your own check) to avoid error messages on non-touch devices such as a desktop.

我希望这能对您有所帮助，直到在Google Play中更新Webview为止.

I hope this can be of help until the webview get's updated in Google Play.

这篇关于三星S6 Webview CSS动画问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！