HTC One X - Webview becomes white/empty after touch

Question

I've an Android application which has text box for search, some buttons, webviews (1 visible 2 invisible) and an admob adview. the app just searches on some special sites and it works great on emulator, samsung galaxy devices. but I've issues with HTC One X (don't know about other HTC models).

The problem is, when you click a search button, the webview loads the page. then "sometimes" when you try to touch even for scrolling, the webview just returns to totally white area with scroll bars. this occurs especially after ad refresh. even sometimes ad's background and text area totally becomes white -so not readable- too. on the ad just blue arrow and blue phone call images stay visible!

does anybody have any issues like this, and any solution? thanks in advance.

here is my layout xml:

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:ads="http://schemas.android.com/apk/lib/com.google.ads"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:background="#ffffff"
    android:orientation="vertical" >

    <LinearLayout
        xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:ads="http://schemas.android.com/apk/lib/com.google.ads"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:orientation="vertical" >

        <LinearLayout
            android:id="@+id/layoutDashboard"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:layout_gravity="center_vertical"
            android:background="@drawable/border_shape"
            android:orientation="vertical"
            android:paddingTop="1sp" >

            <EditText
                android:id="@+id/editxtKeyword"
                android:layout_width="fill_parent"
                android:layout_height="43dp"
                android:layout_marginLeft="1dp"
                android:layout_marginRight="1dp"
                android:layout_marginTop="2dp"
                android:ems="10"
                android:hint="@string/editxtKeyword_hint"
                android:singleLine="true" >
            </EditText>

            <HorizontalScrollView
                android:id="@+id/horizontalScrollView1"
                android:layout_width="fill_parent"
                android:layout_height="0dip"
                android:layout_gravity="center_vertical"
                android:layout_weight="0.30"
                android:paddingBottom="2dp"
                android:paddingLeft="1dp"
                android:scrollbars="none" >

                <LinearLayout
                    android:id="@+id/layoutButtons"
                    android:layout_width="wrap_content"
                    android:layout_height="fill_parent"
                    android:layout_gravity="center_vertical"
                    android:layout_marginTop="0dp"
                    android:layout_marginBottom="1dp"
                    android:layout_marginLeft="1dp"
                    android:layout_marginRight="1dp"
                    android:orientation="horizontal" >
<
                    <Button
                        android:id="@+id/btnAk"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_gravity="center_vertical"
                        android:layout_margin="1dp"
                        android:background="@drawable/custom_button_shape"
                        android:text="asd" />

                    <Button
                        android:id="@+id/btnCm"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_gravity="center_vertical"
                        android:layout_margin="1dp"
                        android:background="@drawable/custom_button_shape"
                        android:text="csm" />

                </LinearLayout>
            </HorizontalScrollView>
        </LinearLayout>

        <RelativeLayout
            android:layout_width="fill_parent"
            android:layout_height="fill_parent" >

            <WebView
                android:id="@+id/webV"
                android:layout_width="fill_parent"
                android:layout_height="fill_parent"
                android:layout_above="@+id/linlaylay1"
                android:visibility="visible" />

            <WebView
                android:id="@+id/webVAnalytics"
                android:layout_width="1dp"
                android:layout_height="0dp"
                android:visibility="invisible" />

            <WebView
                android:id="@+id/WebVSahibinden"
                android:layout_width="1dp"
                android:layout_height="0dp"
                android:visibility="invisible" />

            <LinearLayout
                android:id="@+id/linlaylay1"
                android:layout_width="fill_parent"
                android:layout_height="wrap_content"
                android:layout_alignParentBottom="true"
                android:layout_margin="0dp"
                android:orientation="vertical"
                android:padding="0dp" >

                <com.google.ads.AdView
                    android:id="@+id/adViewSmall"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_gravity="center_horizontal|top"
                    ads:adSize="BANNER"
                    ads:adUnitId="a123123"
                    ads:loadAdOnCreate="true"
                    ads:testDevices="TEST_EMULATOR"  />
            </LinearLayout>
        </RelativeLayout>
    </LinearLayout>

    <LinearLayout
        android:id="@+id/layoutProgress"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="top|center_horizontal"
        android:layout_marginBottom="50dp"
        android:layout_marginTop="5dp"
        android:background="@drawable/progress_shape"
        android:padding="2dp"
        android:visibility="invisible" >

        <TextView
            android:id="@+id/lblLoading"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_margin="2dp"
            android:text="@string/msg_loading"
            android:textAppearance="?android:attr/textAppearanceMedium"
            android:textColor="#000000" />

        <ImageButton
            android:contentDescription="@string/dialog_cancel"
            android:id="@+id/btnStop"
            android:layout_width="30dp"
            android:layout_height="30dp"
            android:src="@drawable/stop" />
    </LinearLayout>

</FrameLayout>

Answer 1

There are many issues when showing hardware accelerated views on top of each other. I would rework your layout not to overlap web views or scroll views, or disable hardware acceleration.

Answer 2

A known bug

You can disable hardware acceleration on your WebView but be sure to do so in a way that doesn't break older devices:

if(android.os.Build.VERSION.SDK_INT > android.os.Build.VERSION_CODES.HONEYCOMB){
    //mWebView is some WebView
    mWebView.setLayerType(View.LAYER_TYPE_SOFTWARE, null);
}

Caveats

• Videos will not play in the browser
• Scrolling will not be nearly as smooth

This is fixed in Jelly Bean according to the bug but I haven't been able to verify that personally.

Answer 3

I have seen this issue with single webviews on HTC phones. One of the comments in this bug thread makes some suggestions to help optimize WebView performance. The bug is about 3D transforms but I have found the comment's techniques to be useful for WebViews in general.

This presentation at Google I/O 2012 also provides some good information on the topic of WebViews, in general.

Both suggest that dynamic content be placed on a "layer." This means assigning this CSS rule to the element:

  -webkit-transform: translate3d(0, 0, 0);

By applying this rule, Android "tells the browser to pre-composite the layer onto its own texture so it can be animated later for (nearly) free" This behavior is not free - it can consume more memory so I would apply it judiciously. The presentation linked above does a good job explaining why.

In my case, I was able to avoid a "white screen" by applying this rule to a DIV that wraps the entire page. The page will sometimes render white for a second and then render the content. I have not seen the "white" page persist forever as I did before applying this technique. I did not see out-of-control memory consumption. YMMV.

I would also suggest that you do what you can to simplify your layout. Easier said than done, but some good suggestions can be found in the docs.