Highlighted

Local page rendered incorrectly on Android

Explorer ,
Jun 09, 2015

Copy link to clipboard

Copied

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? 

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.

TOPICS
Development

Views

294

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more

Local page rendered incorrectly on Android

Explorer ,
Jun 09, 2015

Copy link to clipboard

Copied

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? 

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.

TOPICS
Development

Views

295

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Jun 09, 2015 0
Engaged ,
Jun 09, 2015

Copy link to clipboard

Copied

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?

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jun 09, 2015 0
Explorer ,
Jun 09, 2015

Copy link to clipboard

Copied

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.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jun 09, 2015 0
Engaged ,
Jun 09, 2015

Copy link to clipboard

Copied

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?

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jun 09, 2015 0
Explorer ,
Jun 09, 2015

Copy link to clipboard

Copied

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

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jun 09, 2015 0
Explorer ,
Jun 10, 2015

Copy link to clipboard

Copied

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.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jun 10, 2015 0