page contents disapear on android

[gdamjan]

I'm using Android 2.3.x phone with its bultin webkit based browser.
On the demo page, after a notification disapears, all the content on the page disapears too. But as soon I scroll the page everything reapears again. It's very strange, maybe even a bug in the browser?

[wavded]

This may be akin to what is happening over in issue #9 (also webkit based)

[H0rst]

I just tested humane.js and have included it into an phonegap app. On a android 2.2 device i have a empty page, after the message is disapeared. Content doesen't come back when i scroll.
On a honeycomb tablet (Android 3.2) all works fine.

Edit:
A quick workaround is adding a function:
humane.info("Test",function(){document.body.style.backgroundColor="#fff"})

But the color have to be different to the original color. Example: When background-color of body is set with css to fff and you use the example above, it doesen't work. Content is gone.
When the color is set to anything other, it works. Also when called multiple and color is already fff.
Also it works when the color is initial fff and i use this:
document.body.style.backgroundColor="#888"
humane.info("Test",function(){document.body.style.backgroundColor="#fff"})

Weird....

BTW: little flickering also happens, but this is no problem on android. Android apps need a little flickering and jerking. ;-)

[wavded]

There is a known webkit issue that is referenced in #9, my gut is it got fixed in the updated OS. I was able to work around some of it using z-index instead of visibility. It is related to the stylesheet and not the JS. All the JS does it apply the class and throw it back the the browser to animate to that class and that where the flickering comes in. I have been trying hacks to get it to work but haven't been successful, if you come across one that works well, please let me know!

[H0rst]

I don't think it is the same problem. The whole page is lost. But i believe, it is a android webkit bug, too. I have made some tests today and get strange results. All my workarounds haven't worked, too.
I have tested also in Emulator, to check, if it is some HTC Sense issue. But it happens on all 2.x versions, and it works on 3.x.

[wavded]

I just tested iOS 5 and the flicker there is gone as well.

[wavded]

Confirmed new Android 4 has the flicker gone, noticed that the jqmobile peeps have had better success there as well. I may just fallback to JS animation for older OS.

[wavded]

updated code to work without any glitches on iOS v5 and Android 4, it may have had a positive affect on iOS <5 or Android <4 but currently don't have any devices to test.

[H0rst]

The demo page now works on a Android 2.2 Device. !!!
Thanks a lot. Can you explain what you have changed?

[wavded]

Apparently, earlier versions of mobile webkit did not like it when you animated the zIndex property, which we don't really need to animate but to make it easier to get up and running all themes just by using transition: all instead of specifying all the components. It wasn't obvious that this was causing the issue until iOS5 where you saw the element 'behind' other elements at the start of the animation, and in front after... so anyway yippee!

[H0rst]

Yippee!
Thanks for the info. I plan to use humane.js in my blood pressure tracker ( http://www.bloodpressuredb.com ), when new values are saved. It runs in every browser and as phonegap based app on iOS and Android. So i love to have a easy to use library.

[wavded]

hey awesome! glad to hear!