I have a simple with overflow-y:scroll. On the web it works fine, and the contents of the div scrolls.
But on iPad, some times when releasing the touch from a scroll it suddenly jumps to the top. And every time when scrolling to the bottom.
This is also effecting an itunes store, in our meta tags, that displays a link to an app when 'bouncing' at the top.
Related
I've been trying to work this out for a while but I keep coming to a dead end.
Scenario:
I have a youtube video embedded in an iframe on my page.
I am able to play the video just fine on my Mac when using voiceover however on my iPhone 6 and an iPad, when I use VoiceOver and the swipe gestures to move through the page and attempt to play the video, the viewport scrolls to the top of the page when focus reaches VoiceOver.
Here is a gif that is currently happening.
Incidentally, this problem doesn't occur when the youtube video is one of the first items on the page, it only happens when the video is below the fold as it were. The current has JS to make the heigh of all the divs the same.
I should mention I have seen this previous question and indeed attempted to implement it but the issue was still occurring.
Any help or advice would be appreciated.
My iOS app has some html5 pages. When you slide upper or down, then comes the question ,if you slide quickly , the page will block at some point, looks like the effect of the bounds property of scrollview,but just the opposite, it cann't show the full content on the page .only if you slide quiet slowly, then the other content on the page shows. It drives me crazy....
I came across a weird scrolling issue on iOS (7 or 8) shown on www.cahri.com/tests/scroll
How to reproduce?
Open the example page on an iPhone/iPad/iOS Simulator in landscape
Touch with your right thumb the main content (right side) and scroll up or down
Release your right thumb
Touch with your left thumb the left side (which is a div with overflow: scroll) and try to scroll: the page scrolls instead of the div. Release your left thumb.
It may take a couple of tries to reproduce, please get back to 2 if the page is not scrolling.
Touch again with your left thumb the left side, now it scrolls correctly
Would you have any idea what is causing the issue? And how would one fix this issue?
iOS web browsers still run into issues with fixed positioned elements (as is your left div) and scrolling. In the many web projects I have done this seemingly always causes issues/bugs that are somewhat inexplainable. I know this is not an exact answer, but I'm just sharing that I've been down this road before :)
Best solution is to either use a method that gets away from fixed positioning and scrolling for mobile devices or a third party scroll library like: http://cubiq.org/iscroll-5
I've had a lot of success with them on iOS devices.
If you wanted a different solution for mobile, you could use media queries to change positioning on elements.
#media screen and (max-width: 600px) {
.column-left { ... }
}
Say you've got a Xcode app with embedded web view exposing a simple HTML5 page.
This page has a title and an input tag and a nav top bar (position: fixed; top:0;).
When the user tap in it the first time, the whole screen scrolls up to enable the keyboard appears while maintaining the input tag visible, when I tap the enter button.
The issue I face is that my HTML is not restored identically (I mean, it scrolls down back, but my top bar is shifted about 10 pixels below the top edge of the screen.
But when I tap the keyboard hide button, the scrolls restore my initial view, with no issue.
Anyone experienced the issue before? Any clue of what going on or a way to work around this?
Ps: issue is present on iOS 7 (7.1.2). I didn't tested on iOS 8 as my app must support iOS 7.
I finally ended up with adding an explicit keyboard withdrawing by applying blur() the the input as follows:
<input ng-change="$(this).blur()">
This immediately makes the keyboard disappearing, while the hw initial scrolling is reversed.
I have a problem with html5 app in ios7. It's easier to explain it at the screenshots:
At the start everything is fine - https://www.dropbox.com/s/x03b2blcqjptvpi/1.jpeg?dl=0
When I touch text input it's still ok (page scrolls down to the input)
After blur (when keyboard is hiding) the screen is scrolling back, but over 20px too much and it looks like this - https://www.dropbox.com/s/qpbbd1903tfb4qt/3.jpeg?dl=0
I've tried everything (including all possibilities of apple-mobile-web-app-status-bar-style meta tag) and it's still not working. I wonder why ios7 scrolls my app under status bar, even if at the start of the app it's ok. Does anyone have any idea?