StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p><strong>Note:</strong><br> There's a better solution as of Android 4.4+. It's a drop-in <code>WebView</code> replacement called <em>CrossWalk</em>. It uses the latest Chromium-kit and it's fantastic. You can read up about it here: <a href="https://crosswalk-project.org" rel="nofollow" title="crosswalk-project.org">crosswalk-project.org</a></p> <p>Also, it appears that since Android 4.4, the <code>invalidate()</code> solution is no longer necessary and you can get away with using some of the other safer answer. I would only use this <code>invalidate()</code> approach as a last-ditch effort.</p> <hr> <p>I'm answering my own question to hopefully help people out with the same issues as me.</p> <p>I've tried several methods to making things better, even the all notorious -<code>webkit-transform: translate3d(0,0,0);</code> Even that didn't work all too well.</p> <p>Let me share with you what did work.</p> <p>First, use the most recent API. I'm using API 15. In your <code>AndroidManifest.xml</code>, make sure to enable <em>hardware acceleration</em>. If your version of API does not support this, then move on to the next bit.</p> <p>If your version does support it, you can enable it by modifying your manifest:</p> <pre><code><application ... android:hardwareAccelerated="true"> </code></pre> <p>Also, make sure that your manifest has the minimum supported API to the one that you are using. Since I'm using API 15, this is what my manifest has:</p> <pre><code><uses-sdk android:minSdkVersion="15" android:targetSdkVersion="15" /> </code></pre> <p><em>(<strong>Update</strong>: you should now modify that values in your <code>build.gradle</code>)</em></p> <p>Now, in your primary CSS file for what will be presented in a WebView, add something like this:</p> <pre><code>body div { -webkit-transform: translate3d(0,0,0); } </code></pre> <p>Add onto the body div bit with any other element types you have; you can probably exclude images, <code>ul</code>, <code>li</code>, etc. The reason for applying this CSS style to everything is just by trial and error, and I found that brute-applying it to everything appears to work the best. With a larger DOM tree, you may need to be more-specific. I'm not sure what the specification would be, however.</p> <p>When you instantiate your <code>WebView</code>, there are some settings you'll want to set:</p> <pre><code>@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); } </code></pre> <p>Second to last, but crucial bit: I was reading through the source code for the <code>WebView</code> class and found this little tiny comment about force redrawing. There is a <code>static final boolean</code>, that when set to <code>true</code> will force the view to always redraw. I'm not huge on Java syntax, but I don't think you can directly change a static final attribute of a class. So what I ended up doing was I extended the class like so:</p> <pre><code>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(); } } </code></pre> <p>Keep in mind, I'm using Cordova/PhoneGap, so I had to extend from the <code>CordovaWebView</code>. If you see in the onDraw method, there is a call to <code>invalidate</code>. This will cause the view to redraw constantly. I highly recommend adding in logic to only redraw when you need it, however.</p> <p>There is one final step, if you are using Cordova. You have to tell PhoneGap to use your new <code>WebView</code> class instead of their own <code>WebView</code> class. In your <code>MainActivity</code> class, add this:</p> <pre><code>public void init(){ CordovaWebView webView = new MyWebView(MainActivity.this); super.init(webView, new CordovaWebViewClient(this, webView), new CordovaChromeClient(this, webView)); } </code></pre> <p>That's it! Try and run your app and see if everything is much smoother. Before doing all of these changes, the pages would appear white, no CSS changes would be applied until after tapping on the screen again, animations were super choppy or not even noticeable. I should mention that the animations are still choppy, but far much less choppy than before.</p> <p>If anyone has anything to add to this, just comment under. I'm always open for optimizations; and I'm fully aware there may be better ways to do what I have just recommended.</p> <p>If my above solution did not work for you, could you describe your specific situation and what results you are seeing with Androids <code>WebView</code>?</p> <p>Lastly, I have enabled this answer as a <em>"community wiki"</em>, so anyone and everyone, feel free to make adjustments.</p> <p>Thanks!</p> <hr> <p><strong>Edit:</strong></p> <p>With the most latest PhoneGap, you'll need to have your init() method look more like this:</p> <pre><code>public void init(){ CordovaWebView webView = new MyWebView(MainActivity.this); super.init(webView, new IceCreamCordovaWebViewClient(this, webView), new CordovaChromeClient(this, webView)); } </code></pre>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload