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>

Berezina

do not look back, look in front! there are some occurences that gives error. But htc releases new devices, and the problem not happens in this devices. – Straticulate

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.

Vile

Lance, thanks for your response. actually no webviews overlap, because just 1 of them is visible, the others are not. while loading i show a "loading" label over EditText area and that's all overlapping. what you mean about disabling hardware acceleration? – Orlosky

You can turn off hardware acceleration for individual views in code or entirely in your manifest, this is a new feature of Android where views are turned into GPU textures and drawn that way. By the way, I've often seen things like camera previews interfere with things even when they are invisible. If you really are going to stack the views like you are doing, you'd have a slightly better change of it working if you used gone instead of invisible. That's fixed bugs for me before. – Vile

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.

Dissentious

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.

Margravine

I've read several hacks and tried many ways to get around all the HTC webview issues. In the end, this was the only thing that worked. Thanks! – Ganley

Daniel, glad to hear that this approach worked for someone else. This was one of the oddest issues I've come across. – Margravine