Local page rendered incorrectly on Android

[phihochzwei]

In a current project we are using local html/css/js content displayed in a StageWebView.

It all works like charm on iOS, however, on Android the whole thing behaves very weird:

The page loads, all content is loaded and displayed way to small (my guess is 3-4 times smaller) and out of place. After 1-3 seconds everything "jumps" to the desired size and position.

Anyone got an idea on how to solve this? 

[Guest]

What Android device(s) are you testing with? What version(s) of Android OS is your app running on? Is it possible to host your HTML/CSS/JS files on a server and load the index file using Google Chrome on the Android device(s) and see if you get the same or a different response? What JS events are you using to handle the page resize?

[phihochzwei]

1. Samsung Galaxy S4

2. Android 5.0.1

3. Nothing on the server, all files are local. All files are under NDA

4. I do not use any events to handle a resize. The page builds with the wrong sizes and positions and after 1-3 seconds it all jumps to the look as it should.

[Guest]

I understand that none of the files are on a server and are local. My question was can you put them on a server, even an internal one that can only be accessed by devices (computer, tablet, phone) only if it is on the same network? Since StageWebView utilizes the built-in webkit rendering engine, I am wonder if Google Chrome or the stock web browser on your S4 will have the same result after loading up the index.html/php file. If it does, then you know that it is likely something that needs to be resolved with your HTML/CSS/JS. If it doesn't respond the same way in the stock Samsung browser or Google Chrome as it currently does in your app, then I would think that you could safely assume it is an AIR issue. I wouldn't try Firefox since (correct me if Im wrong) it uses it's own Gecko rendering engine.

Has this been tested on any other Android device besides the S4?

[phihochzwei]

Ah, now I get it

Yes I already tried that, and it worked fine, so I guess it is an AIR-related problem. What´s strange about it is, that it makes no difference if I use StageWebView(true) or StageWebView(false).

I am going to purchase a S5 and a S6 as soon as stores open up here in Germany, so we´ll see then

[phihochzwei · Accepted solution]

Okay, tested it on the S4, 5 and 6. Problem was always the same. It seems, the the Browser needs some time to transfer the dimensions from DOM to CSS (which is weird somehow). The solution was simple: Apply the width as CSS to body onReady, all good.