Appearance problem in browsers

[Victor Fagerström]

I'm currently working on a login page and something came up. When testing app in the web-browser (when pressing "test" in project) everything looks fine. When I scan the QR code with my iPhone and open the app in Safari mobile browser a problem appears. You can always "scroll down" a bit to hide the url field in safari (and chrome) thus making the app window being placed a bit further up. When doing this a white area appears "below" the app, looking like the app doesn't fill the entire browser..

Is this a known problem and can something be done because it looks ugly..?

I've vertically centered my content, code:
Appery('LoginGrid').css('position', 'absolute');
Appery('LoginGrid').css('top', '50%');
Appery('LoginGrid').css('margin-top', '-224px');
Appery('LoginGrid').css('left', '50%');
Appery('LoginGrid').css('margin-left', '-142px');

is this something that might cause the problem? Feels like I've tried everything.

I have pictures of problem if you don't understand what I'm trying to say, haha.

Thankful for your help.

Victor

no problem:
https://d2r1vs3d9006ap.cloudfront.net...

problem:
https://d2r1vs3d9006ap.cloudfront.net...

[Igor]

Hello,

What device and iOS version are you using? Did you run app in Appery.io tester or in mobile browser?

[Victor Fagerström]

iPhone 5s iOS 7.0.4. Tried both appery.io tester (which works as supposed on computer) and mobile browser (which causes the problem with the white part in the bottom).

[Victor Fagerström]

You are welcome to look at my project to see if I'm causing the problem myself somehow.

Tried exporting project to html/css/js and opened index.html in xCode's iOS simulater's safari browser. The problem is there too. Seems to be same problem in all mobile browsers.

[Igor]

Did you share the project with a href="mailto:support@appery.io" rel="nofollow"support@appery.io/a? What is the project name?

[Victor Fagerström]

emailed now, it's called Karma Network

[Igor]

We'll test it but it will take some time.

[Victor Fagerström]

No problem, thank you very must for looking into it.

[Illya Stepanov]

Hi Victor,

I can't reproduce it now, have you changed your project?

width="306"

[Victor Fagerström]

Oh yeah sorry, i've been working on the project tonight. The problem is still the same though; those green lines at the bottom, thats the rectangular area that shouldn't be there, only when I try it the area is further down making the area appear further down, like 30px'ish under the log in with facebook button.. I won't be changing anything more in the project now in like 14h.