So I have this page where I have a big menu that is scrollable with it's own scrollbar. The main scrollbar of the page is hidden which makes it not functional.
On chrome, this menu scrolls silk smooth and everything seems to be fine.
On firefox, the scrolling experience is horrible, it is just not usable. (Smooth scrolling disabled)
Is there something that could be done via css maybe to improve the performance of firefox scrolling?
If I understand your situation correctly, a similar problem regarding Firefox scrolling can be found at: https://support.mozilla.org/en-US/questions/981140
The corresponding solution, given by iamjayakumars states:
"Type about:config in the URL and filter general.smoothScroll.mouseWheel.durationMaxMS change the value as 1000 and try it.
If, it doesn't work try this
Type about:config in the URL and filter mousewheel.enable_pixel_scrolling and change the value as false."
Related
First of all, let me explain what I mean by "smooth scrolling" here. When I rotate the mouse wheel by one "step", e.g. on Google Search results page, the page gradually moves up/down - the transition from the "before scroll" to "after scroll" states takes some time and is nicely animated. However, whenever I create a long page in html and try to scroll just one "step", there is no animation or transition on scroll - the page just instantly jumps few lines up or down. The average repaint time of my page takes about 5ms, with peaks up to 8ms, so I know repaint time is not the cause of that.
I know that such smooth scrolling can be achieved without any scripting, as for example the site http://www.thecssninja.com/ scrolls super-smooth on Chrome even with js disabled.
Why does Chrome choose not to scroll my page smoothly? How do I achieve smooth scroll without depending on JS, as CSS Ninja manages to?
PS Firefox does not seem to have that issue. How do I tell Chrome with my html/css that I'd like my page to scroll smoothly?
Either you can enable chrome smooth scrolling manually, which does not make sense for website development.
Or you can use some of the libraries to achieve that.
https://github.com/fatlinesofcode/jquery.smoothwheel
Sadly for chrome you cannot enable smooth scrolling through HTML, CSS or JS.
I know you're not after JS solutions, but I've never seen anything guarantee this outside of JavaScript, and karan's link above is certainly the smoothest example I've seen of doing this.
(Proviso: I'm using Chrome for Windows, not Linux. Apparently, that may make a difference.)
I use Chrome myself, and I always get the pages scrolling in jumps, not smoothly--even the pages you described as 'smooth' above step for me several lines at a time, including the Google results page. There used to be a flag available for this in Chrome, which allowed you to turn on smooth scrolling -- it could be accessed through Chrome's flags (go to chrome://flags/ to see those that are available) -- but it's now only available for the Linux Chrome platform. It may be available again in the future, but for now at least, it isn't. Hopefully, though, these experimental features will eventually find their way into Chrome, and render this whole issue obsolete.
Firefox, on the other hand, scrolls in nice smooth steps no matter what page I'm on--including my own local info pages which have almost no styling at all. IE scrolls smoothly, though not nearly as nicely as Firefox, while Opera behaves like Chrome, and steps through the pages several lines at a time.
I'm pretty sure that this is an issue to do with the browser, and not something that you can currently remedy with styling alone. Sorry I couldn't be of more help, but if you're doing this for a client, at least you'll be able to explain the issue.
I would highly recommend finding an alternate solution, but I have managed to find a solution to this exact problem for one of my websites. Akin to just using glitter glue to solve a leak in a wall, I discovered that including an iframe for a Google map on the page (even if it's hidden) somehow added in smooth scrolling. I have no idea how it works, but for some bizarre reason it does.
As I said though, I highly recommend not doing this, as its an extra (and sometimes lengthy) request made on each page to include an element most users won't ever see.
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 a weird one: on my site http://tustincommercial.com some pages are aligned slightly differently from others, giving a jumping effect.
Compare http://tustincommercial.com vs http://tustincommercial.com/who-we-are to see the effect.
The markup is identical, apart from the content in the middle. The same CSS is being applied.
Now, the real killer is that this difference disappears when developer tools are open. All browsers (IE8, Chrome, Safari, Firefox, Opera) show the difference when developer tools are not open. None of them show the difference when their developer tools are open.
Any ideas on the best way to find and fix the source of the difference?
The issue comes from the scrollbar appearing when your content goes past the bottom of the window. When the developer tools are open all pages need to scroll, so the jump disappears.
There are a few ways to fix this, but I currently can't tell you what would be best for your site. You could make it fixed width, you could try using max-width, or you could force the scroll bar to always be present:
html {
overflow-y: scroll;
}
I'm experiencing this weird problem which my scrollbar jumps by itself to somewhere that I don't want it to.
I have a table with scrollbar inside this page, if the user have a smaller screen, the page automatically adds a scrollbar. If I scroll down to the bottom of the table and click on it, the scrollbar of the page jumps up so I can no longer see the thing I clicked. Any ideas?
Thanks.
There are a number of things that can be causing this.
You clicked on a hyperlink with a href of "#", which will cause most browsers to scroll to the top of the page,
There's possibly a CSS :focus or :active rule somewhere being triggered that causes the height of the page to change
There's a javascript onclick event firing and changing the page
...or possibly something else entirely.
Have you tried in different browsers? It could be a bug in the browser itself.
Are you sure the object causing the problem is not an <a href='#'><div onclick='yourJavaScriptFunction()'>...</div></a> or something similar?
Perhaps you have a meta refresh tag
<meta http-equiv="refresh" content="600">
I have seen these cause similar issues on safari, post a link to the page and you will find getting a solution much easier.
My scrollbar jumps when I hit Page Up or Page Down. Also, my laptop trackpad can cause odd mouse behavior if I bounce my thumb against it.
And when I poured a large Latte into my keyboard, I had problems, then. But then the whole computer stopped working about an hour later.