HTC One X - Webview turns white / blank after touching

Question

I have an Android app that has a search text box, some buttons, web views (1 visible 2 invisible) and admob adview. the application just searches on some special sites and works great on emulators, samsung galactic devices. but I have problems with HTC One X (I don’t know about other HTC models).

The problem is that when you click the search button, the webview loads the page. then "sometimes" when you try to touch even for scrolling, the web view simply returns to a completely white area with scroll bars. This happens especially after updating ads. even sometimes the advertising background and the text area completely turn white - also unreadable. on advertising, only the blue arrow and the blue images of phone calls remain visible!

Does anyone have problems like this and any solution? thanks in advance.

here is my xml layout:

<?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 problems when displaying hardware accelerated representations on top of each other. I would redo your layout so as not to overlap web views or scrolling, or disable hardware acceleration.

Answer 2

Known bug

You can disable hardware acceleration in your WebView, but be sure to do it so as not to break old 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); } 

Warning

• Videos will not play in browser
• Scrolling will not be nearly smooth.

This has been fixed in the Bean jelly according to the error, but I could not verify it personally.

Answer 3

I saw this issue with one webview on HTC phones. One of the comments in this error stream provides some recommendations for optimizing WebView performance. The error is related to 3D transforms, but I found comment methods useful for WebView in general.

This presentation on Google I / O 2012 also contains some useful information on the topic of WebViews in general.

Both suggest that dynamic content is placed on a “layer”. This means that this CSS rule is assigned to the element:

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

By applying this rule, Android "tells the browser to pre-compose the layer on its own texture so that it can be animated later (almost) for free." This behavior is not free - it can consume more memory, so I would use it wisely. The above presentation explains well why.

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

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