Android WebView rend en blanc/blanc, vue n'est pas mise à jour sur le css des changements ou des modifications HTML, les animations sont saccadées

Remarque:

Il y a une meilleure solution que de Android 4.4+. C'est un drop-in WebView de remplacement appelé tableau de Concordance de l'. Il utilise la plus récente de Chrome-kit et c'est fantastique. Vous pouvez lire à ce sujet ici: crosswalk-project.org

Aussi, il semble que depuis Android 4.4, le invalidate() solution n'est plus nécessaire et vous pouvez vous en sortir avec l'aide de certains de l'autre plus sûr de la réponse. Je ne utiliser ce invalidate() approche comme un ultime effort.

---

Je vais répondre à ma propre question, j'espère aider les gens avec les mêmes problèmes que moi.

J'ai essayé plusieurs méthodes pour améliorer les choses, même les toutes notoire -webkit-transform: translate3d(0,0,0); Même cela ne fonctionne pas trop bien.

Permettez-moi de partager avec vous ce qui a fait le travail.

Tout d'abord, utiliser la plus récente de l'API. Je suis l'aide de l'API 15. Dans votre AndroidManifest.xml, assurez-vous d'activer l'accélération matérielle. Si votre version de l'API ne prend pas en charge ce, puis passer à la partie suivante.

Si votre version ne prend en charge, vous pouvez l'activer en modifiant votre manifeste:

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

Aussi, assurez-vous que votre manifeste est le minimum API pris en charge pour celui que vous êtes en utilisant. Depuis que je suis en utilisant l'API de 15, c'est ce que mon manifeste a:

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

(Mise à jour: vous devez maintenant modifier les valeurs dans votre build.gradle)

Maintenant, dans votre premier fichier CSS pour ce qui va être présenté dans une WebView, ajouter quelque chose comme ceci:

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

Ajouter sur le corps div peu avec tout autre type d'élément que vous avez; vous pouvez probablement exclure les images, ul, li, etc. La raison pour appliquer le style CSS pour tout ce qui est juste par essai et erreur, et j'ai trouvé que la brute de l'appliquer à tout ce qui semble fonctionner le mieux. Avec une plus grande arborescence DOM, vous devrez peut-être plus spécifique. Je ne suis pas sûr de ce que la norme serait, cependant.

Lorsque vous instanciez votre WebView, il y a certains paramètres que vous devrez définir:

@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);
}

Seconde à la dernière, mais crucial peu: j'ai été en lisant le code source de la WebView la classe et a trouvé ce petit commentaire à propos de la force de la redessiner. Il y a un static final boolean, que lorsque la valeur true force la vue pour toujours redessiner. Je ne suis pas énorme sur la syntaxe Java, mais je ne pense pas que vous pouvez modifier directement un static final attribut d'une classe. Donc, ce que j'ai fais, j'ai étendu la classe comme ceci:

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();
    }

}

Gardez à l'esprit, je suis en utilisant Cordova/PhoneGap, j'ai donc dû étendre à partir de la CordovaWebView. Si vous voyez dans la méthode onDraw, il y a un appel à invalidate. Ce sera la cause de la vue de redessiner sans cesse. Je recommande fortement l'ajout d'une logique pour seulement redessiner lorsque vous en avez besoin, cependant.

Il y a une dernière étape, si vous êtes à l'aide de Cordoue. Vous avez à dire à PhoneGap pour utiliser votre nouveau WebView classe au lieu de leur propre WebView classe. Dans votre MainActivity catégorie, ajouter ceci:

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

Que c'est! Essayez et d'exécuter votre application et de voir si tout est beaucoup plus lisse. Avant de faire tous ces changements, les pages apparaissent en blanc, pas de CSS changements seront appliqués jusqu'à ce que après avoir appuyé sur l'écran, les animations étaient super agitée ou n'est même pas perceptible. Je dois mentionner que les animations sont toujours instable, mais beaucoup moins agitée qu'auparavant.

Si quelqu'un a quelque chose à ajouter à cela, il suffit de commenter sous. Je suis toujours ouvert pour des optimisations; et j'en suis pleinement conscient, il peut y avoir de meilleures façons de faire ce que je viens de recommandé.

Si ma solution ci-dessus ne fonctionne pas pour vous, pourriez-vous décrire votre situation spécifique et quels sont les résultats que vous voyez avec des Androïdes WebView?

Enfin, je l'ai activé cette réponse comme un "wiki de la communauté", donc n'importe qui et tout le monde, n'hésitez pas à faire des ajustements.

Merci!

---

Edit:

Avec la plupart des derniers PhoneGap, vous aurez besoin d'avoir votre méthode init() de ressembler à ceci:

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

Pour moi, cette question a été produit seulement sur les appareils Samsung. J'ai été en mesure de le réparer par la désactivation de l'Accélération Matérielle pour les WebViews:

webView.setLayerType(View.LAYER_TYPE_SOFTWARE, null);

Espère que cela aide.

Voir aussi ma réponse à WebView ne parvient pas à rendre jusqu'touché Android 4.2.2 , L'idée est d'exporter @Olivier de la fonction JavaScript de sorte que vous pouvez déclencher invalide JS sensible pièces ... Mon dieu, encore un autre plus hack !! 🙂

Vider le cache de webView dans oncreate() et ça marche pour moi.

webView.clearCache(true);