From time to time, my app will stop allowing scrolling of the entire page length. It will work perfectly, for some time, then suddenly the page will stop scrolling and you can only view/use the section currently in the view-able area.
It is intermittent enough, that it is hard to track down, and diagnose.
I have had reports of this issue on both Android and iPhone/iPad products.
Has anyone else run into a similar issue? Where you able to find out the problem?
I am using PhoneGap/Cordova 2.2.0 with custom JavaScript.
Thank you.
-- Eric
I've had this problem before when setting my body/html to 100% height in the css. The following is how I fixed it.
html, body{
height:100%;
margin: 0;
-webkit-overflow-scrolling: touch;
overflow:scroll;
}
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 use the Simple Utility Function from this Answer to detect if a element is in my viewport. If it is, an fade-in animation is started for my content.
It works fine on Windows, macOS, Android and every browser on iOS except for Safari. In Safari the content stays hidden and the animation only starts after I try to zoom out of my site. I tested this on iOS 10 and 11 Beta 5.
My solution to this problem would be detecting if the user uses Safari on iOS and don't animate my content. But i would like to fix this problem so that the animation works. Can anyone help me with this?
EDIT: I think the issue is caused by Semantic-ui.Tested it with plain html and javascript and it works. I try to fix it now.
I finnaly found a solution.
The issue was the sidebar from Semantic UI. I found a CSS snipped on the docs. I altered the code a little bit and added it to my css file.
html.ios {
overflow-x: hidden;
-webkit-overflow-scrolling: auto !important;
}
html.ios,
html.ios body {
height: initial !important;
}
Seems like -webkit-overflow-scrolling caused the problem. But i had to add the other lines of code too or else it stutters when i scroll.
Like this, everything works perfectly!
My website competitionmantra.com works fine on mobile while scrolling down.
But, on desktop it does not scroll.
Here are two screenshots of it.
To start with I can scroll when all the JavaScript eventually loads it prevents the scroll so I assume its to do with one of those JS files you have implemented, which there are an insane amount of by the way!
Easy fix is the adding:
height:100%;
to the body tag in the CSS
I added height:100% onto your body and it worked
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).