I created simple web page using semantic ui library: http://cvhunter.net/m
Scrolling vertically is glitching on iphone sometimes especially first scrolling try.
How can i fix this ?
Thanks.
I fixed my problem, it is causing because of overflow-x:hidden at container div.
Related
When I write my horizontal scroll box inside the view-content, it does not work...However if move it out of the view-content, it can work... Does anyone know what's wrong? I guess some css for view-content? However I don't know what's the default code...
May be this is due to the double scrolling at same position which you may not able to proper scroll at iOS. We can do the same ar brower because scroll and drag is different in browser.
I am building a phonegap app and using iscroll to improve scrolling on both android and iOS but since upgrading to iOS 10 the scrolling has become very jerky(it does not follow my finger and when it catches up it scrolls really fast where you can not read anything).
Has anyone else had this issue or found a work around?
Update:
I have discovered that the if I remove the 'position:relative' from the body element in my css I can scroll smoothly but the scrollable window no longer grows correctly so my infinite scrolling does not work.
Also I am using iscroll-probe.js and I am not sure if that makes a difference.
Thanks
So I have built a site using Keith Clark's pure CSS parallax idea. And it looks good, but I'm curious if anyone has figured out how to allow inertial/momentum scrolling on iOS.
Here is my site so far.
What I know so far:
Currently inertial/momentum scrolling doesn't work because essentially the whole page is held within a container with overflow-y:auto. So when you are scrolling on the page you are scrolling within a container.
On iOS you have to apply -webkit-overflow-scrolling: touch to allow anything that scrolls that isn't the viewport to have inertial/momentum scrolling.
If you add -webkit-overflow-scrolling: touch to .parallax then the entire parallax effect breaks.
example of that here
I've tried adding iscroll.js to the page but it also breaks the page by making the children within the .parallax container to scroll in a way that isn't proper. It makes the parallax layers move up and down relative to the viewport instead of he container.
Another problem that this causes which isn't as big a deal but would be nice to address here since it's related is that on iOS the page will never go into minimal-ui since that only happens when the viewport scrolls.
I've seen people ask about this on the blog post so I figured I could bring the same problems over to stackoverflow and see if anyone has any good ideas.
Thanks!
Not what you want to hear (assuming you put in some good hours reading through Keith Clark's guide) but iOS handles scrolling events differently than desktop. It's possible you could adjust what you have already, but if you really want this you're probably better off switching to a js tool with documented support for iOS parallax + momentum. Stellar can do this, for example - http://markdalgleish.com/projects/stellar.js/docs/
I'm using the webkit-overflow-scrolling:touch property on an iOS/Android WebApp and it works in most cases and provides a native scrolling experience without Rubberband Scrolling.
Now the issue is, when the div that needs to be scrolled isn't tall enough the rubberband scrolling will happen again. I tried setting height:100% but that didn't help either.
Any ideas?
I've come across this when I made a Cordova iOS app. You can fix this by applying min-height: 101%. Though, that would make your page scrollable for a minor distance but it will trigger the desired effect you're looking for.
I'm developing a web-app, based on the Dribbble API. In this app I have a div which shows all comments with a max-height of 200px, so if there's more than 200px worth on comments, the div gets scrollable. So far so good, works as intended on iOS.
However, when I add a Scale transfrm to this div (to mimic iOS's folder opening animation), scrolling the div breaks entirely. You can see the live version here: http://maxsteenbergen.com/longshot/
Is this fixable by setting a a new style using jQ's webkitAnimationEnd or is this without solution?
EDIT: In the meantime I found that using two fingers to scroll the div works but obviously, this is not how it's supposed to work.
It's also worth noting that scrolling DIV's don't work on older versions of iOS - it might be worth having a look at iScroll.
You can implement native iOS UI and achieve much better UI feedback. especially on scroll view. To obtain data from Dribbble API you may use 3rd-party Dribbble iOS SDK: https://github.com/agilie/dribbble-ios-sdk