I'm having an issue with scrolling being somewhat temporarily disabled on mobile iOS devices within a fixed position element. The issue is somewhat described (but not answered) here: iOS scrolling with fixed position
I've searched everywhere, but it seems my issue is somehow unique, as none of the solutions helped (such as setting the elements to absolute instead of fixed, or setting -webkit-overflow-scrolling to touch. I've tried all solutions posted here: Scrolling issue on position fixed element on iOS)
The website I work on is currently live with the issue, so I can easily provide a codebase to test: https://finanztip.de
If this page is opened in an iOS device (all other browsers and OS's are fine), when the navigation is opened and scrolled (usually I can reproduce it by scrolling to the bottom of the container and attempting to scroll back up), sometimes (not always) the scrolling is disabled and the user can't continue scrolling for a while.
I assume it has something to do with the scrolling context. The iOS device is trying to scroll in another element/context other than the one I need it to scroll in, and while it attempts to scroll somewhere else, it doesn't scroll in the context I need it in (in my case I want the div with the class "vertical-scroll-container" to be scrollable). If I remove the class "vertical-scroll-container", it scrolls just fine.
I have a video of the issue, but I can't upload it to stackoverflow, so I'll send it to anyone interested, or I might upload it somewhere and link it.
I'm not sure if I provided enough information to understand my situation. In case something's missing just let me know.
EDIT: Here's the video: https://www.dropbox.com/s/wh4oe99f5tlxzjs/ios-scroll-issue.MOV?dl=0
Related
I'm aware of this question, but it seems to address a different issue.
In my case, scroll snapping doesn't always work together with anchor links (or the scrollIntoView method) only when the scroll box is html (and not body or main or some other container). I have an iPhone XR with iOS 16.
Here is a CodeSandbox to easily test on the phone. (I didn't include a code snippet in the post, as this is best to be experienced full screen, on the phone.)
When I make another container the scroll box, scrolling 'away' the address bar in Safari doesn't work anymore, and since I like this feature, I'd prefer to have html being my scroll box.
Is this really a bug or am I doing something wrong?
I’m seeing an issue where text only shows up after scrolling the HTML elements out of viewport or after switching to another tab and back. The same issue also happens in WKWebView. Is there a way to prevent this issue from happening? These sections can be scroll horizontally. Not sure if that’s related, but I find it very odd that Safari doesn’t render text that’s in the viewport.
In the attached image, you can see that there are blank rows under EU, UK and US.
Any suggestion is appreciative.
--
Added another image showing HTML elements. Element with .wrapper-row is the one that has overflow-x property. This works perfectly fine on desktop including when simulating to mobile responsive size, but has an issue even with Chrome on iOS.
I found a workaround. After playing around with debugger, I believe this has to do with iOS trying to optimize what content to load. The problem is that it's incorrectly optimizing and not loading content within the initial visible viewport. This is a similar issue where sometime I have to trigger a fake scroll so that content aligns properly in Safari on iOS especially with position fixed or absolute.
To make sure content shows up. I did the following:
$('.selector').css('visibility', 'hidden');
setTimeout(function(){
$('.selector').css('visibility', 'visible');
}, 10);
This must be done outside of the main thread execution or it doesn't work. That's why I'm putting a small timeout before executing it.
I found an article that mentioned that this has to do with
-webkit-overflow-scrolling: touch
and that a solution is to add
-webkit-transform: translateZ(0px)
but that didn't work for me. You can reference that thread here just in case my solution doesn't work for you and this one does.
iOS textarea text hidden when using -webkit-overflow-scrolling: touch
I'm working with a webview this time. I've got a strange behaviour here.
The overflow-x is set to hidden, and works just fine on browsers. But when it comes to any mobile device, it doesn't respect the overflow at all.
http://www2.madeinweb.com.br/jobs/adc/prototype/html/
This is the URL of it. If you try to open the menu, it will work as intended. But I can scroll the content I placed left. That doesn't happen on browsers.
I know I can fully disable scrolling with jQuery, but I can't find a proper way to disable just horizontal scrolling.
Any tips over it?
I've managed to tweak it out with touchmove. thanks no one for the answer
I have the content of my website in an absolute positioned div that fills the whole screen. The scrolling on this div is normally clunky, as it's not the native momentum scrolling. Solution? Append -webkit-overflow-scrolling: touch; to the div.
Momentum scrolling works now, but when I scroll down the page, the div elements aren't showing up. The console shows no errors, nothing is wrong with the actual page, but the individual posts (the div's) don't show. Here's an example:
Can anyone confirm this on their iPad, or suggest a fix? I'd rather not use something along the lines of Scrollability. It might be that the iOS6 beta is causing this, but I'd like to be reassured.
You can view this site on your iPad
And if anyone wants me to explain my bookmarks, I will gladly do so.
Currently .post CSS class uses position: relative. If you remove that line, the issue goes away. Apparently relatively position elements are hidden when not within the view. Not exactly sure the why the iPad does this or if it is a bug. In my experience, iPad devices try to run as efficiently as possible. For example, if you scroll JS animations are frozen. Perhaps this is a technique to make iPads render pages more efficiently. Hopefully that helps.
This article maybe be related and have a work around: CSS3 property webkit-overflow-scrolling:touch ERROR
Using '-webkit-overflow-scrolling: touch' hides content while scrolling/dragging
Unable to scroll pages vertically on Google Chrome "12.0.742.100", using the scroll-bar thumb, however I can use mouse scroll and also scroll the page using the up and down arrow keys.
Important points:
If I re-size the window such that there is a horizontal scroll-bar, the vertical scroll-bar starts to works fine, but if I re-size/there is no horizontal scroll-bar, the vertical scroll-bar thumb fails to work.
If I stop loading the page/try to scroll while the page is loading, it works fine.
The issue is reproducible on almost all the pages of my client's website "http://www.charlotterusse.com/", like:
http://www.charlotterusse.com/home/index.jsp
http://www.charlotterusse.com/category/index.jsp?categoryId=4078197
http://www.charlotterusse.com/family/index.jsp?categoryId=4335463&cp=4078197
http://www.charlotterusse.com/category/index.jsp?categoryId=4238904
http://www.charlotterusse.com/category/index.jsp?categoryId=4238909&cp=4238904
but, the following pages scroll just fine:
http://www.charlotterusse.com/sitemap/index.jsp
https://www.charlotterusse.com/checkout/index.jsp?process=login
http://www.charlotterusse.com/helpdesk/index.jsp
http://www.charlotterusse.com/storeLocator/index.jsp
http://www.charlotterusse.com/giftCenter/index.jsp
It may be due to some conflict with Flash or JavaScript, but the site works fine on all other browsers and not chrome.
Please advice what could the issue be and how can it be fixed.
Ultimately found the solution for this issue. There was a JS code which was hindering the normal mousedrag actions.