Ive used absolute positioning on this page to keep the footer at the bottom of the window;
http://smartpeopletalkfast.co.uk/ppr6/contact
This works fine in browsers but with an i pad (in landscape) when you scroll down the footer moves up. How can I keep it fixed so it behaves like a normal browser?
Thanks
Yes it works, but not with position: absolute
Check this solution for sticky footers using more flexible css.
It works perfectly in mobile safari.
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.
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 using fancybox, and it seems that many people who use it disable zooming of any kind on mobile devices. The problem is that when I have a fancybox open, completely zoom in while the fancy box is open, completely zoom out, and then close fancybox. When I scroll the body, depending on the direction of the scroll, there is a lag where a top section or bottom section is chopped off, and then revealed after a split second delay.
I found out that removing the position fixed style from the overlay removes the issue. I also saw that on caniuse.com that fixed positioning only has 6% support, including iOS 7.
Are there any workarounds that can fix this issue with fancybox? Thanks.
edit
I found this other SO question, that might help for reference: CSS "position: fixed;" on iPad/iPhone?
On your div put:
overflow-y: scroll;
-webkit-overflow-scrolling: touch;
Am developing one mobile web application using jquerymobile. i have header ,some field controls, and footer, i set the data-position ="fixed" for footer so that the footer will come bottom of the screen, i am getting this perfectly in all mobiles native browser,like safari,bb,android native. But when i running in the operamobile browser i am getting the footer in the bottom of the screen i can only seen this footer after long scroll down and also am getting some whitespace without background color above the footer. I don't know what is this problem, is it operamobile browser compatibility or anyother thing we have to specify in the css? has anyone faced this problem?
We saw the whitespace problem in the Android browser. Switching back from a3 to a2 solved the problem.
To avoid white space at bottom in "portrait" orientation with jquerymobile 1.0b3 you should redefine "min-height" in css:
<style type="text/css">
.portrait,
.portrait .ui-page { min-height: 300px; }
</style>