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
}
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.
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 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).
On iPad I cannot scroll a web page. It works fine in Safari, Chrome and Firefox on OS X.
The page has an area in which content can be scrolled only horizontally. It consists of a container div which has width = 100% and height = (100% - 40px). I am setting the height by a JavaScipt function which is triggered by window resize events. Inside this container is another div with the width of the content (very wide, to avoid line breaks). Inside that is the content.
CSS properties of the container are:
overflow-x:scroll;
overflow-y:hidden;
white-space:nowrap;
See the page and full source code here: dcfoto.de
On iPad, scrolling is not possible. What am I doing wrong?
By the way: resizing also does not work properly on orientation change. Maybe that's connected.
Unfortunately a two-finger swipe needs to be performed, and even then it is not responsive (when compared to the default one finger swipe scroll).
There are quite many javascript solutions out there, (sencha touch and iscroll being the most promising and advanced)
I would recommend http://cubiq.org/iscroll-4 which is hands down the coolest touch-scroll script out there. It also works for android, but quite more sluggishly since the default android browser albeit webkit based doesnot support css3 3d accelerated properties as good as the mobile safari one.
If I were you I would check for the user agent of the user, and deploy that script for android and ipad/iphone users.