width:100% in CSS not rendering well in Android 4.4

Question

I am facing a curious problem with the last update of Android (4.4) : my CSS rendering is visible at screen for the user which means that my webview content is very thin before to adapt to the width:100% of the CSS.

I am using an android.webkit.WebView to display an html string like this :

webView.loadDataWithBaseURL(null, html, "text/html", "utf-8", null);

This webview has the following size set :

• 90% of screen width for webview width
• WRAP_CONTENT for webview height

The CSS is built to fit the webview width, the height will then adjust itself. There is no absolute width or height set in the css.

When I display my webview (which is already fully loaded as I used onPageFinished callback to know the loading is finished), the CSS starts to be rendered. This is surprising me as I thought it should be rendered when I loaded the webview. The problem is that for the user, a very small white line is displayed and then this line adjust itself to match the webview settings.

If I fix the width in the CSS, I don't have any rendering problem. But I cannot do that as I want to match all screen sizes.

There was no problem before Android 4.4 as there was nothing displayed on screen until CSS was fully rendered.

By the way, I was using the setPictureListener() method from the webview. I know that this method is deprecated (and obsolete for a while), but it was the only way to know when the webview had really finish to be "drawn" on screen. If I use this method in Android 4.4, it is called many time and this error comes up in DDMS :

W/UnimplementedWebViewApi(23891): Unimplemented WebView method run called from: android.os.Handler.handleCallback(Handler.java:733)

I don't know if there is a direct relationship, I don't think so as even not using this method, my CSS is not rendered correctly.

I tried many things :

• use javascript onload to make the body visible
• use a chrome client on the webview and wait for progress to be at 100% to make my webview visible
• use a webview client and wait for onPageFinished to make my webview visible
• use a postDelayed of 500 ms when using the PictureListener to make my webview visible
• use all layer type choices : HARDWARE / SOFTWARE / NONE
• make my webview parent firstly INVISIBLE / GONE and then VISIBLE

but nothing worked. It seems like the CSS is rendered only when the webview is visible for the user.

I cannot show source code as it is for professional purpose so I would only like different point of view on where I could be searching (or if someone has already see this curious error in DDMS)

Has someone an idea on how to wait for the CSS to be rendered in the webview before to display this webview ?

Many thanks

Answer 1

I managed to fix this problem.

I had a display: table; in the style of the main div of my HTML and removing this makes my rendering looks good.

As it was working well with Android previous version, I am not able to determine if it is a bug of the webview, or a problem in my CSS.

By the way, thanks for having a look at my problem