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.
Related
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...
The scroll is very slow and static when in Safari, on iPhone 7. There is no flow after scrolling, it just stops immediately when you lift your finger off of the screen.
There is also an issue where i can't double click the clock/URL bar, to get back to the top of the page. If i see other pages the URL bar hides when you are scrolling down the page - but it doesn't on my site.
I'm not sure as to what causes these issues, but my guess would be either HTML, CSS or JavaScript. You can see the issue here: http://www.shareone.dk/ using iPhone
You use an overflow. For make you scroll smooth use this:
-webkit-overflow-scrolling: touch;
See more details here : https://css-tricks.com/snippets/css/momentum-scrolling-on-ios-overflow-elements/
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 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