Titanium JIRA Archive
Titanium SDK/CLI (TIMOB)

[TIMOB-25815] Android: HTML style "position: absolute" hiding the div or HTML element in Webview

GitHub Issuen/a
TypeBug
PriorityNone
StatusClosed
ResolutionNot Our Bug
Resolution Date2019-11-12T13:47:49.000+0000
Affected Version/sn/a
Fix Version/sn/a
ComponentsAndroid
Labelsn/a
ReporterMostafizur Rahman
AssigneeGary Mathews
Created2018-02-26T21:15:37.000+0000
Updated2019-11-12T13:47:49.000+0000

Description

Hello, HTML style "position: absolute" hiding the div or HTML element in Webview on Android. *Test Environment:* SDK: 7.0.2.GA Appcelerator Command-Line Interface, version 7.0.2 Android Device: Samsung Gallaxy Grand prime (5.1.1) *Test Code:* app.js 
var webview = Titanium.UI.createWebView({
	url : 'test.html'
});
var window = Titanium.UI.createWindow();
window.add(webview); 
window.open();
test.html 
<!DOCTYPE html>
<html>
<body>
<h1 style="color:blue; bottom: 25px; position: absolute; width: 100%;">This is a heading</h1><!--Here we can use any Div also-->
</body>
</html>
When we remove the style "position: absolute" its working fine for Android. Note: Same code is working fine for iOS. Thanks

Comments

  1. Arbind 2018-02-27

    It used to work before, and is no longer working. This issue has broken all of our apps. Please see if we can make it the high priority, as it is such a basic feature.
  2. Eric Merriman 2018-03-02

    [~mr.arbindbhagat] Thank you for the report. we will take a look and schedule a fix as soon as possible.
  3. Arbind 2018-03-02

    Thank you Eric so much for giving this a priority.
  4. Joshua Quick 2018-03-03

    This appears to be a hardware acceleration bug on Google's end. In fact, it's a very common issue: https://stackoverflow.com/questions/17059899/android-webview-hardware-acceleration-artefact-workarounds So, I've found 2 work-arounds:

    Use a "fixed" position instead of "absolute", if possible. "fixed" doesn't appear to have this issue.

    Add a border to your WebView. This will make Titanium disable hardware acceleration on the WebView.

    Note that Titanium used to disable hardware acceleration on the WebView in the past, which was not ideal. In our quest to optimize our UI, we've inadvertently revealed a bug on Google's end. Ideally, you don't want to disable hardware acceleration and work-around it in the HTML side instead for best performance. Also, if you search this topic on stackoverflow, many native developers have found that setting CSS style "webkit-backface-visibility: hidden;" works-around this issue as well. I haven't tried it for myself, but that might be worth pursuing. Does this help?
  5. Arbind 2018-03-03

    Hi Joshua, (1) Unfortunately, neither "absolute" is working, nor "fixed" is working. If either of these worked, we could position our items properly. But since neither of these two properties are working on Android, we are just not able to make our pages as our clients want it to be. (2) Yes, you are right. I don't want to disable the hardware acceleration. (3) "webkit-backface-visibility: hidden;" is also not making any difference at all. So, do you have any other suggestion/work-around? Please advise.
  6. Joshua Quick 2018-03-05

    [~mr.arbindbhagat], setting it to "fixed" worked for me, but I had to scroll down to see the label. Not sure why Android's native WebView is using a larger page size (taller than the screen) compared to iOS by default. If you're trying to fit all of the page's content within the screen so that the user does not have to scroll, then you can set the WebView.scalesPageToFit property to true to scale it down to fit. I recommend that you set this property when attempting to use the above mentioned work-arounds. Interestingly enough, the "absolute" position works-around the bug too, but it may render the content smaller then you'd like. Perhaps adjusting the html/viewport height might help with that on your end.
  7. Arbind 2018-03-05

    Joshua, Thanks for your reply. I just now noticed that the "absolute" thing works all good in the 6.2.2 GA. I don't know if hardware acceleration was turned off in that version. May be, you would like to look towards that?
  8. Joshua Quick 2018-03-05

    [~mr.arbindbhagat], yes, hardware acceleration was disabled in the older versions because it was configured to use zero width border, but the fact that it had a border setting fooled the code into disable hardware acceleration. When we optimized the border handling (in Titanium 6.3.0 I believe), it ended up leaving hardware acceleration enabled, which is what most devs wanted, but also introduced this hardware acceleration bug on Google's end.

JSON Source