I use position: fixed to create a fixed top navigation menu on my mobile web application.
After adding -webkit-overflow-scrolling: touch, the scrolling works smoothly. However, the top menu disappears during scrolling. It shows only after the scrolling stops.
I have searched many solutions, such as CSS3 property webkit-overflow-scrolling:touch ERROR and iOS5 Images disappear when scrolling with webkit-overflow-scrolling: touch. However, the given solutions are not working for me. Please check out this example: http://jsbin.com/woxuwihuzu/12/ (visited from iPhone 5c Chrome/Firefox).
Did I miss anything?
After two days struggling, I found this post saves me: 100% screen height css.
I have to limit the height of my content area to be the same height of the screen. Please find the working demo here: http://jsbin.com/tubaqaqumi/3/ (visit from a real phone; a Chrome simulator doesn't tell the difference).
Related
the website is running prefect and i can do anything on pc on it i also setting it to work correctly on any mobile device but the only problem i got now is i cannot scroll only on the first page where is an animination is runny i cant scroll over it here i just hostet the server kamal.bplaced.net just please someone have a look im looking for the last 3 hours for a sloution but no avail thanks
note i can scroll all in other place just in the first section where it animated it wont scroll
i try using differnet youtube video methods and more but didnt work i used overflow: scroll;
-webkit-overflow-scrolling: touch; it did work on mobile but my pc version was ducked
I'm creating a responsive chatbot in css boostrap. But when I open the app on an Iphone the header and footer are not fixed, and open keyboard header was going up the screen. Could someone help me figure out this issue, it only appearson the Iphone, it works fine on android.
Please make clear, what you re talking about.
Not sure, but
are u talking about the browser bar, that gets hidden on the iPhone - in most cases that is the only difference between android and ios.
I had that problem for a web page that used an horizontal scroll effect and was fixed.
When I swiped the page on ios devices the browser tried to hide the bars, got some flickering and jumping side effects.
If that is the case, please try
/* Prevent hiding browser bar */
html {
overflow: hidden!important;
height:100%!important;
position:fixed!important; /* prevent overscroll bounce */
-webkit-overflow-scrolling: touch!important; /* iOS velocity scrolling */
}
that helped me.
Hope it ll help you as well.
I've read all the articles I can find and still can't figure this quirk out.
Setup:
What we have is a fixed positioned nav that slides down from the top. You can scroll up and down the nav just fine on android, all desktops, and 99% of the time on iOS devices
Problem:
On new iOS devices, when you scroll to the top of the window, but not enough to make the "page bounce", you can't scroll up or down for about a second or until the device is rotated.
Anyone run into this or any have ideas on how to fix it? The nav is rendered on the GPU, I've tried show/hiding the nav on scroll/touchstart/touchend, I've tried all the tricks my brain can come up with. Please help. I'm dying.
And of course, I can't show you my code because of my company...
I just finished programing my own website, i uploaded it to my hosting on GoDaddy, is looking good on computers and on my android phone BUT on the iPhone and the iPad everything is wrong. I have some parallax effects, fixed backgrounds and a menu that goes up and get fixed position when getting to the top of the viewport, nothing of that works on these devices.
The scroll seams to be the biggest problem, i have a lot of things that moves or do something as you scroll the page down, all of these effect just applied when the smooth scroll stops, i read something about scroll momentum on IOs devices and this:
overflow-y: scroll;
-webkit-overflow-scrolling: touch;
Is there some meta tags, pre-fixes i don't know about? I just can't make this work, thanks in advance.
The problem is that IOs devices turn off all the movement functions to achieve that smooth scroll that iPhone and iPads have when you navigate a website.
The best solution I found for this is: http://markdalgleish.com/projects/stellar.js/demos/
The other option is to detect if the user agent is on a iPhone or iPad and change the css styles to the objects with the parallax or other transition effects with this jQuery:
Js
var userAgent = window.navigator.userAgent;
if (userAgent.match(/iPad/i) || userAgent.match(/iPhone/i)) {
$('#banner').addClass('ios-background');
}
Css
.ios-background{
backgorund-attachment: scroll
}
I am using http://alvarotrigo.com/fullPage to create a simple one page website. Everything is perfect except on iPhone when in landscape mode - when I scroll, instead of the page staying full screen and moving to the next anchor, safari reveals address bar & bottom nav causing content to scale in height.
Can anyone help please?
The problem is not that the bars are revealed, but that they hide when orientation changes. This is a iOS 7 behavior which may not be the same in other phone OS.
At this moment developers don't have control over this behavior of Safari over iOS 7.
The bug has been already reported in the github respotitory of fullpage.js but I'm afraid no solution has been found for it yet:
https://github.com/alvarotrigo/fullPage.js/issues/79