I’m not really sure on where to post this, but it’s kind-of detrimental to my applications design that requires a full-screen layout. (Making use of 100% height and width without scroll). The design works fine loading through iOS Safari, and works great on the iOS simulator through xCode. However on ionic view and the compiled application on the actual phone, the bottom is cut off. Here’s a screenshot of the difference between in-application and in-browser. Please note that this works in application and in browser on android devices properly, and when hosting ionic serve live all of the responsive website checkers show the proper design.
Screenshots:
(This is the screenshot of the application, notice the bottom of the answers are cut off)
This is the image from my web-browser (Notice the dev url)
Here’s a picture from a responsive website tester for mobile devices, (Note: Had to portforward my ionic-serve to be accessed remotely)
Notice how all of them besides the actual application have the correct design?
This design was accomplished using the following CSS
html, body, ion-view, ion-content, .scroll {
height: 100%;
margin: 0;
padding: 0;
overflow: hidden;
}
Can provide screenshots of the application working on all android devices. Tested iOS devices include:
- iPhone 4s
- iPhone 5
- iPhone 6
- iPhone 6+
- iPhone 6s
- iPhone 6s+
All of which have the same issue. Design works in all mobile browsers that I can think of (Firefox, Chrome, Safari, Whatever android’s standard is). Didn’t test IE. Who uses IE. Pft.
Issue created: https://github.com/driftyco/ionic/issues/4543