WebView inside ViewPager or ScrollView - weird rendering bug on Android 3.0+

Question

I have a ViewPager. Every page of the ViewPager is a ScrollView. The ScrollView contains a WebView and several other Views.

On Android 2.3 and older everything works fine but on 3.0+ there's a weird rendering issue:

The WebView should start right under the photo

When scrolling left / right in the ViewPager, there is also a very subtle rendering issue (which is present in Android 4.0 Gmail app too).

I have heard the Android engineers strongly impress that scrolling views should not be placed inside of other scrolling views. I'm not sure if that is the reason the layout is wrong, but in general I believe they recommend avoiding placing a WebView inside a ScrollView. Maybe that is causing issues? — cottonBallPaws, Nov 25 '11 at 19:17
I heard that too, but in pre-3.0 it was warking fine. And Gmail app has WebView in ViewPager (and perhaps ScrollView) too. Some things are really hard to implement without putting WebView in a ScrollView. — fhucho, Nov 25 '11 at 19:37
Out of curiosity is the Gmail 4.0 app source code out there? That'd be nice to take a look at. — Tony Chan, Nov 28 '11 at 05:53

score 14 · Answer 1 · answered Nov 25 '11 at 19:21

14

This might be related to hardwareAcceleration. Try specifically turning it off. You can do this

1) in the application tag inside your manifest (which will disable hardware acceleration throughout the app)

android:hardwareAccelerated="false"

OR 2) Disabling it for the problematic view in code:

myView.setLayerType(View.LAYER_TYPE_SOFTWARE, null);

For more information, and to check if a WebView or a ListView handle hardware acceleration correct see this link

answered Nov 25 '11 at 19:21

Entreco

12,738
8
75
95

I already tried disabling acceleration in the manifest, unfortunately it didn't fix it. Perhaps WebView is always accelerated... I will try the setLayerType later. – fhucho Nov 25 '11 at 19:29
I had a separate problem with WebView and hardwareAccelerated. They definitely don't play nice together. Turning off hardwareAccelarated for my specific in the manifest solved it. I'm not sure what the OP's problem could be since it was supposedly working pre-3.0 – Tony Chan Nov 28 '11 at 05:56
this solves other kind of problem. In my case, the webview only becomes blank if the size of the html is higher than XX amounts, and it means that the webview would have scrollview – Rafael Sanches Aug 21 '12 at 08:08

score 4 · Accepted Answer · edited Apr 17 '14 at 10:16

4

I partially solved it by calling webView.requestLayout() in ScrollView.onScrollChanged(). It is now almost ok, but when scrolling, the WebView seems slightly out of sync with other ScrollView children. Sometimes the WebView seems to scroll slightly slowly than other Views and catches up with them a moment later.

edited Apr 17 '14 at 10:16

madlymad

6,367
6
37
68

answered Nov 29 '11 at 12:26

fhucho

34,062
40
136
186

this didn't helped in my case, there's anything else that we can do? – Rafael Sanches Aug 21 '12 at 08:19
2

Convince the customer that this is not a bug, but an advanced graphical effect, that took along time to develop :) – fhucho Aug 21 '12 at 14:30
yeah.. or just say like google does: "everyone has already upgraded to the new version, you shouldn't be supporting those devices" – Rafael Sanches Sep 13 '12 at 23:19

Goldsmith · Answer 3 · 2012-03-16T11:51:42.553

2

Had the same issue that wasn't fixed by the accepted answer. In the end, it turned out to be related to position:fixed in the page's CSS. Replacing these instances with position:absolute seems to have done the trick.

edited Mar 16 '12 at 11:51

answered Feb 17 '12 at 11:22

Goldsmith

508
7
13

WebView inside ViewPager or ScrollView - weird rendering bug on Android 3.0+

3 Answers3

Linked