Note that there are some explanatory texts on larger screens.

plurals
  1. POCenter content in android 4.4 webview
    primarykey
    data
    text
    <p>I'm displaying mathematical expressions in a webview (using jqmath library and some CSS). One requirement is that expressions should be centred, and here's what I use to achieve that:</p> <pre><code>&lt;html&gt;&lt;head&gt;&lt;style type='text/css'&gt;html,body {margin: 0;padding: 0;width: 100%;height: 100%;}html {display: table;}body {display: table-cell;vertical-align: middle;text-align: center;}&lt;/style&gt;&lt;/head&gt;&lt;body&gt;&lt;p&gt;here goes the expression&lt;/p&gt;&lt;/body&gt;&lt;/html&gt; </code></pre> <p>Since rendering math takes some time, the webview is hidden while the expression is rendering, and displayed only when it is ready (once the WebViewClient's <code>onPageFinished</code> has been called). This worked well until Android 4.4. </p> <p>The problem with the new webview seems to be that it only applies CSS when it is visible on screen. So after revealing the hidden webview, the expression first appears in the top left corner, and only after ~0.1 seconds "jumps" to the center. This looks ugly, since I have to display many expressions in quick succession. </p> <p>A related problem is described in this question: <a href="https://stackoverflow.com/questions/19810629/width100-in-css-not-rendering-well-in-android-4-4">width:100% in CSS not rendering well in Android 4.4</a>. The asker was able to solve his problem by removing the <code>display: table;</code> from html, but that doesn't work in my case.</p> <p>So is there a way to either: (a) force the new (Chromium-based) webview to render content while it is not visible, or (b) display the content at the center from the beginning (without first displaying it in the top left corner).</p>
    singulars
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
 

Querying!

 
Guidance

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