Android WebView 呈现空白/白色， View 不会在 css 更改或 HTML 更改时更新，动画不连贯

Question

每当我进行 css 类更改时，更改并不总是出现。当我有一个向按钮添加类似向下类名称的触摸事件时，这似乎会发生。该按钮不会更新，页面上的其他任何内容也不会更新。它的工作时间非常不稳定。我还注意到，有时我的元素看起来是白色的，没有任何内容或任何东西。这非常令人沮丧!

Answer 1

注:
Android 4.4+ 有更好的解决方案。这是一个插入式WebView替代称为 CrossWalk。它使用最新的 Chromium 套件，非常棒。你可以在这里阅读:crosswalk-project.org

此外，似乎从 Android 4.4 开始，invalidate()不再需要解决方案，您可以使用其他一些更安全的答案。我只会用这个invalidate()方法作为最后的努力。

我正在回答我自己的问题，希望能帮助人们解决与我相同的问题。

我尝试了几种方法来让事情变得更好，即使是臭名昭著的 - webkit-transform: translate3d(0,0,0);即使这样也不太顺利。

让我与您分享什么是有效的。

首先，使用最新的 API。我正在使用 API 15。在您的 AndroidManifest.xml 中，请确保启用硬件加速。如果您的 API 版本不支持此功能，请继续进行下一步。

如果您的版本确实支持它，您可以通过修改 list 来启用它:

<application
   ...
   android:hardwareAccelerated="true">

此外，请确保您的 list 具有您正在使用的最低支持 API。由于我使用的是 API 15，这就是我的 list 具有的内容:

<uses-sdk
    android:minSdkVersion="15"
    android:targetSdkVersion="15" />

( 更新 :您现在应该修改 build.gradle 中的值)

现在，在您的主要 CSS 文件中，将在 WebView 中呈现的内容，添加如下内容:

body div {
    -webkit-transform: translate3d(0,0,0);
}

使用您拥有的任何其他元素类型添加到 body div 位；您可能可以排除图像，ul , li等。将这种 CSS 样式应用于所有事物的原因只是通过反复试验，我发现将其应用于所有事物似乎效果最好。对于较大的 DOM 树，您可能需要更具体。但是，我不确定规范是什么。

当你实例化你的 WebView ，您需要设置一些设置:

@Override
public void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    super.loadUrl("file:///android_asset/www/index.html");
    appView.getSettings().setRenderPriority(RenderPriority.HIGH);
    appView.getSettings()
            .setPluginState(WebSettings.PluginState.ON_DEMAND);
}

倒数第二个但至关重要的一点:我正在阅读 WebView 的源代码上课，发现这个关于强制重绘的小评论。有一个static final boolean , 当设置为 true将强制 View 始终重绘。我对 Java 语法不是很了解，但我认为您不能直接更改类的静态最终属性。所以我最终做的是像这样扩展类(class):

import org.apache.cordova.CordovaWebView;

import android.content.Context;
import android.graphics.Canvas;

public class MyWebView extends CordovaWebView {
    public static final String TAG = "MyWebView";

    public MyWebView(Context context) {
        super(context);
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        // Warning! This will cause the WebView to continuously be redrawn
        // and will drain the devices battery while the view is displayed!
        invalidate();
    }

}

请记住，我使用的是 Cordova/PhoneGap，所以我必须从 CordovaWebView 扩展.如果您在 onDraw 方法中看到，则调用了 invalidate .这将导致 View 不断重绘。但是，我强烈建议添加逻辑以仅在需要时重绘。

如果您使用的是 Cordova，还有最后一步。您必须告诉 PhoneGap 使用您的新 WebView类而不是自己的WebView类(class)。在您的 MainActivity类，添加这个:

public void init(){
    CordovaWebView webView = new MyWebView(MainActivity.this);
    super.init(webView, new CordovaWebViewClient(this, webView), new CordovaChromeClient(this, webView));
}

而已!尝试运行您的应用程序，看看是否一切都更加顺畅。在进行所有这些更改之前，页面会显示为白色，直到再次点击屏幕后才会应用 CSS 更改，动画非常不稳定甚至不明显。我应该提到动画仍然不稳定，但远不如以前那么不稳定。

如果有人对此有任何补充，请在下方发表评论。我总是愿意进行优化；而且我完全意识到可能有更好的方法来做我刚才推荐的事情。

如果我的上述解决方案对您不起作用，您能否描述一下您的具体情况以及您在使用 Android 时看到的结果 WebView ?

最后，我已将此答案启用为“社区 wiki”，因此任何人和每个人都可以随时进行调整。

谢谢!

编辑:

使用最新的 PhoneGap，您需要让您的 init() 方法看起来更像这样:

public void init(){
    CordovaWebView webView = new MyWebView(MainActivity.this);
    super.init(webView, new IceCreamCordovaWebViewClient(this, webView), new CordovaChromeClient(this, webView));
}