Thursday, March 7, 2013

Gap Appears on HTML div When Using Titanium Webview on Android



I encountered this irritating bug when using a WebView on my application and I was trying to make a div that has a fixed position on the page. At first I thought I set the styles wrong but a further investigation confirms that a gap is really being generated when displaying the div on the WebView.

After looking a bit on my code I found out that Hardware Acceleration affects the WebView and causes this bug to appear. On my application, the setting (for hardware acceleration) can be found on the /platform/android/AndroidManifest.xml file.

Here is the part where the property is set:

1:  <application android:icon="@drawable/appicon"  
2:            android:hardwareAccelerated="true"   
3:            android:label="AndroidWebViewElemGaps" android:name="AndroidwebviewelemgapsApplication"  
4:            android:debuggable="false">  

Removing this setting fixes the WebView but if you really need hardware acceleration for your app, you are out of luck for the mean time. It's worth noting though that not all devices are affected by this bug. Here is the app running on smartphone without any problems:



Source code for my test project can be found in here.

No comments:

Post a Comment