I am building a mobile app with jQuery Mobile for iPad landscape orientation. The pages are 1024px to 768px. When I view it on the desktop (Chorome, Safari, Firefox) it is rendering as it should (1024x768).
But after I save it to the Home Screen on the iPad (iOS 8) and open it, the pages are rendered as trimmed (around 20px) from the bottom. When I check it from the inspector, i see that the html element (which is assigned 99.9% height) is rendering as 747px height. So is the body element.
I tried to give pixel values as height, margins, paddings and all but some greater container seems to be clipping them.
I also tried a few things with the #viewport rule but nothing came out of it.
Any ideas why this is happening and how I can solve this?
It seems the problem was about the status bar. In the default mode, the iOS will pull all your html under the status bar but size the viewport to leave space for the bar (height: 748px). So the space below the 748px will be left blank, to show the white background.
When I added the line below in the head of my html file, the problem was solved (the viewport height equal to 768px -landscape)
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
I then tried it with different values for the content attribute, first with content="black", and then with content="default". In the latter it was the same as no meta tag was applied. With content="black", the bottom was again left blank, but this time the the background color was black.
Related
I noticed recently that every webpage I visit on iOS Chrome has an enormous blank space at the bottom of the page. The space is roughly equal to a full screen height (i.e. 100vh) and is located below all visible elements on the page. Basically I can keep scrolling the page until it's completely blank. The scrollbar also shows that the pages are much longer than their content would require.
All the pages I looked at behave fine on Android, on OSX, and even on iOS when I use Firefox or Safari. The issue seems specific to iOS Chrome. I'm not sure when this issue started but I've updated Chrome and it persists.
Is anyone else experiencing this iOS Chrome bug? I haven't found any info about it.
I created a dummy test webpage and just kept stripping it down to see what was causing the issue. Eventually I was left with a page containing only <p> tags and very minimal CSS (no positioning properties) but the extra space at page bottom still showed up. By adding a background-color to the <body> I could see that this extra space was within the <body> but there wasn't any element forcing the body to extend.
After much trial and error I discovered that if I disable Chrome's Smooth Scrolling this issue is resolved and all pages behave normally.
Solution: Load chrome://flags and set Smooth Scrolling to disable.
Seems odd that this would be necessary. Anyone know what's going on?
This is likely a Chrome bug (iPad). I also spent a lot of time debugging all the css and my components. End up event google.com it self has that mysterious white space (which is about the height of the content itself.).
6 hours gone, but it's a relieve to know it's nothing got to do with my codes.
iPhone with chrome is fine on my end
To stop the page from scrolling, in both x, and y axis, we use the overflow: hidden; attribute in css.
So if we apply this to the body,
body {
overflow: hidden !important;
}
this should work in your scenario!
Please make sure you have added this meta tag and the same attributes
<meta name="viewport" content="width=device-width,initial-scale=1.0">
And check your body tag CSS, there should not be height: 100vh and check your pages again by clearing browser cache or in the private mode.
References SO Questions: remove-unwanted-white-space-in-webview-android
and android-webview-has-extra-white-space-at-the-bottom
I am using NativeScript for angular mobile app development. I have a login page that renders in webview and once app has the token, app then redirects to other native components.
My problem is: Screen renders fine for the first time and when user clicks on any of the text field, key board appears but when user presses Android Back button to hide the keyboard it shows the whitespace in top and bottom of the page.
Based on suggestions available on above threads, I have tried setting the padding and marging to 0.
and
<meta name="viewport" content="target-densityDpi=device-dpi, width=device-width, height=device-height, initial-scale=1">
Thanks for the Playground Manoj.
It looks like there was percentage height and width in html page and everytime user moves out from html page it re adjusts itself to available space and sometimes squeezes as well.
I was using the webview inside the GridLayout and setting the height and width 100% to that GridLayout solved my problem.
http://jsbin.com/fopiwaluwo/edit?html,css,js
http://output.jsbin.com/fopiwaluwo (full screen output - should be viewed on an iPad/iOS simulator.)
When scrolled to the bottom or top of the scrollable overlay the body also scrolls. I want to disable any scrolling on the body while scrolling on the overlay (white transparent area with copy).
This is a simplified example of the web app I wish to apply this to. I know that adding position: fixed to the body disables the scrolling however I can't use that in the real world example. JavaScript solutions welcome.
Cheers
Just add:
<script type="text/javascript">document.ontouchmove=function(event){ event.preventDefault(); }</script>
And behold, body does not scroll, but the overlay does :-)
Update: seems to work on iPhones running iOS 10 only.
Does not work on iPad or iOS 9.
OS: iOS 8.1.1
Browser: Safari
Phone: iPhone 5C
We have a web page which takes 100% height and width. We have locked down the viewport so that the user can not scroll the page vertically or horizontally. This page is shared on Twitter via Safari web browser. When we view the the web page in the twitter app the bottom part of the page gets cut off. We are not able to view the page in its entirety. Even if we change the orientation multiple times still the cut off part is not visible.
The height of the part which is getting cut off is equal to the height of the twitter app container’s header (the part which has cross button, page title/url and share link) and the status bar (the part which has network status icon, time, battery level etc)
Note: This behavior is observed in iOS 8 only.
This has also been driving me crazy for the past several hours. The solution is to not use px or percentage based heights/widths but rather use position:fixed on your html and body elements, then setting top, left, right, bottom to 0. So your code will looks like this:
html, body{
position:fixed;
top:0;
left:0;
right:0;
bottom:0;
}
This forces the content to only be as wide and as tall as the viewport presented in twitters webview component without overflowing. Any code inside the body can now be 100% in either direction without fear of being hidden. This bug was affecting iOS9 as well. Confirmed the fix is working on iOS9.1 with latest Twitter app on ip6/6+, ip5, and ip4.
For anyone else coming across this, the fix I ended up using was
window.addEventListener("resize", function(){
onResize();
});
function onResize(){
document.querySelector("html").style.height = window.innerHeight + "px"
};
onResize();
this seems to work in the latest version of twitter's browser on safari.
I'm optimizing a web-app to work on the iPad Portrait mode. The web-app is built as an iFrame with a width of 350px.
I use the following meta viewport tag:
<meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=350" />
I expect this to behave as follows:
- The width of my visible viewport will be 350px.
- My web application is initially scaled at it's original size, which means the 350px iFrame will be fully rendered in the 350px viewport(with no white space at the borders of the visible viewport.
However, the iPad Portrait mode seems to ignore the width=350 property and renders the page as width=device-width.
Can somebody explain why this is happening and how I have to interpret this behaviour?
In iOS, iframes ignore all viewport settings and render as device defaults. Very annoying.
See -
iOS Safari expands frameset larger than viewport
In our case the viewport size on iPad was equal to the content which is first rendered. So if you have your main container spread to the whole width of the page iPad says "the viewport of that iframed page is same as the devide-width". The solution in our case was to set strict size of the iframe by using the width, height and style attributes. Then simple apply overflow: hidden on the main container.