I have a few scrolling related issues on the website I'm working on: http://wvg.lexerim.com
Since I implemented the twitter ticker on top I could scroll to the right, to solve this I used the most upvoted solution in this thread: DISABLE the Horizontal Scroll (others didn't work).
This solution however results in the following two problems:
- Scrolling isn't fluid anymore (especially on mobile devices)
- The back-to-top button doesn't work anymore <- this isn't important, can simple disable it
Do you guys have any solutions for either the fluid scrolling or a cleaner solution for the horizontal scrolling problem?
Edit: additional information tryingI found out that the problem only exists in Safari and Chrome (and probably other webkit browsers) and not in firefox and that problem is caused by the overflow statements.
Edit 2: As this is apparently a Webkit (based) problem, two bug reports has been filled Safari/Webkit Chromium
I believe you're better off going this way in the CSS:
overflow-x: hidden;
overflow-y: scroll;
Also, perhaps webkit's overflow scrolling for touch may help?
Momentum Scrolling on iOS Overflow Elements
For what it's worth, just peeking at your site in Firefox, back-to-top is working for me. But yes, the scrolling with the scroll wheel is quite slow, and I don't see anything skimming through your code that should cause that.
Related
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 posting on behalf of my SO. Her muse-created website at http://demi.statesideapm.com/ won't scroll horizontally on Chrome, but it works fine on Safari and Edge. The site is just for a uni project and she eventually wants it to be something like this: http://mashup.ikm.gda.pl/
I've found a few people with similar issues but the possible fixes such as removing position:fixed and overflow-x: hidden; height: auto; don't seem to work. She's trialing some sort of slideshow plugin - could it be to do with that?
Go to Page Properties
Select Options
Browser Scrollbars
Change Vertical from Automatic to Always
I've noticed that in Firefox, elements set to overflow: scroll or overflow: auto scroll quite a bit slower than the regular page scroll does. If you click on the top left Stack Exchange logo you can see what I mean if you use your mousewheel on the drop-down menu. Is there any solution, besides the about:config setting, to make these elements scroll as fast as the page?
This doesn't seem happen in Chrome, Opera, Safari or IE on Windows as far as I can tell. No idea about Mac, though (glad if someone could check/confirm).
Open Menu->Options->Advanced->General->Under Browsing Uncheck "AutoScrolling"
this should help
you could also uncheck the "Smooth Scrolling" option underneath. It only makes a marginal difference, but a difference nonetheless.
Do you have a smooth scrolling plugin installed on firefox?
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