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...
Related
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.
So I've built a website and everything is going fine except one thing. When you go to the shop page on a mobile and hit "filter products" (only visible on screens up to 1000px wide), the filter menu that slides out doesn't scroll.
If you try it on your laptop using the mouse wheel it will scroll fine, but go on your phone (or get the chrome inspector to mimic a touch device) and you'll see it doesn't scroll any more when you touch the screen, only with the mouse wheel.
Here is the page in question: https://growitmowit.co.uk/shop/
I have tried ripping the css & js out but once you've clicked "filter products" and the menu has slided out you cannot scroll (with touch) until you slide the filter menu away.
I've now spent hours trying to figure it out and need some help :) Thank you in advance.
oh yeah - sometimes, when you first open the page with the inspector in device mode it is fine. If that's the case refresh the page and it'll start playing up :(
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 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).
I'm working on a some-what basic site, but have an issue we can't seem to get passed. (site not complete)
It's a horizontal size, laid out using fullPage.js.
https://github.com/alvarotrigo/fullPage.js/
When you click the Sign up button in the top right corner, the slide container scrolls all the way left, displaying an iframe, loaded with a CRM.
We're using a callback in the fullPage plugin to know when a user has scrolled to that page. When the page with the iframe is loaded, a script runs to resize the height of the iframe to the available screen-estate ( win height - header & footer ).
Problem is, scrolling doesn't work on Iphone. Works fine on desktop.
Can't seem to figure out what's going on. Have read up on scrolling in iframes on iOS devices, but haven't stumbled upon a viable solution.
url: go-combine.com
Thank you in advance for your help.