After a recent update to Google Chrome (currently I'm at 30.0.1599.101), the Sources window of the Developer Tools now has the scrollbar lag as I drag it down. The effect is kind of like Facebook's 'infinite scroll', in that if I drag the scrollbar to the bottom, it doesn't actually scroll to the very end of the source. Instead goes only part of the way, and the scrollbar position then pops back up toward the middle. In order to get to the end or even middle of a longer document, I have to drag the scrollbar down multiple times. The only workaround I see is to hit Ctrl-End (Windows) and then scroll back upwards, which seems like unnecessary extra keystrokes.
This lag effect is appropriate for applications like Facebook, but it's very irritating here. Is there any way to disable this effect?
This is an issue https://code.google.com/p/chromium/issues/detail?id=269941 that is fixed in M31. You could wait for it to reach stable or try using dev/beta/canary channel as a workaround for now.
Related
I've noticed on Ubuntu and OSX (when an external mouse is used) that there is a settings to always show scrollbars on a page. When they are showing like this it makes our site look awful as the scrollbars do not agree with our colour scheme and they take up valuable space. The default setting on OSX of hiding scrollbars until you scroll works very well for us.
Is there any way we can disable or improve upon this in the browser?
This is an OS-level setting that applies to every scrollable content window, not just web browsers.
Is there any way we can disable or improve upon this in the browser?
I don't think so. If you're seeing scrollbars on elements inside your page (not just on the right side of window) then you may want to adjust your overflow/layout CSS on those elements.
I have a div with a vertical scrollbar containing mixed content. Some plain text, images, tables, some other visual markup.
There seems to be a couple of points scrolling down the page where it gets "stuck" in Chrome (also tested Firefox, it seemed slightly slower at that point, but not broken), with the scroll wheel or up/down arrows only moving a couple of pixels at a time. I have no listeners for the scroll events on this page.
How do web browsers decide how fast to scroll at various points when dealing with mixed/complex content?
I suspect this could be a performance issue with the rendering of components. I recommend using the Timeline feature in Chrome Developer Tools to capture the performance information and go from there.
I'm working on a web application that was not built with responsive design, so the mobile experience is not very good for users. Nonetheless, users still use the site on mobile devices. When a particular page in the app is rendered on a mobile device, a vertical scroll bar appears, which seems to be totally normal (viewing the same page in a desktop browser also has a vertical scroll bar). The issue is that when the user on the mobile device tries to scroll to the bottom to press the submit button, the page jumps back to the very top. More specifically, the user touches and drags the screen so that the bottom of the page comes into view, and as soon as they lift their finger from the screen, the page jumps back to the top, preventing them from being able to press the submit button because it becomes hidden from view. I've hooked up my iPhone 5s to my Mac and used Desktop Safari to set up remote debugging. That hasn't helped much yet. I noticed that changing the device orientation makes the issue go away. More specifically, the issue happens in both portrait and landscape orientation. However, if you load the page in one orientation and then switch to the other orientation, the issue seems to go away. I also noticed that setting an explicit height on one of the container divs in the CSS seems to fix the issue, despite the CSS rule being ultimately overridden by the browser (I think). When I set the height, though, the page renders a little differently because the content seems more zoomed out and no vertical scroll bar appears.
I've searched around the web for a while and have not found anything useful. I found two SO posts about similar issues, and one had no answer and the other had a junk answer that should've been a comment.
Basically what I'm looking for is for someone that has some amount of experience developing for the mobile web to give me some possible avenues to travel down to solve this thing the right way. I don't want a hacky solution and I'm not necessarily looking for you to tell me what code to write. I just want to get to the bottom of what would cause the page to jerk like that.
Thanks in advance :)
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.
One of my customers have trouble viewing some of the pages on our website. Specifically it is the vertical scrollbar, that disappears on some pages.
She is using Google Chrome, and as the following screenshots will show, Chrome also has a strange toolbar.
On this first image, there are no problem with scrolling
http://i45.tinypic.com/3444bqe.png
On the next, the scrollbar has disappeared although there is plenty of content on the page.
http://i47.tinypic.com/125qdlv.png
I have tried to reproduce the error on my own machine with the same Chrome version, but it was not possible. So I suspect the strange toolbar to be the culprit.
Does anybody know which extension gives this bar?
Turning the scrollbar always on did the trick for me:
body {
overflow-y: scroll;
}
I fixed my missing scroll bar issue by turning off "Use hardware acceleration when available" It's in chrome://settings/system
Disabling extensions solved my problem, thanks! Here's an additional suggestion.
To "disable" your extensions quickly and temporarily, just open a new Incognito window in Chrome.
Menu -> "New incognito window"
OR
Ctrl + Shift + N
Cheers!
Josh
I did the same thing that #Carey Pico did and it workeddisabling extensions. I first ran into this missing right scroll bar problem when opening Yahoo news pages today. I disabled all extensions (access tools --> extensions) and got back my right scroll bar where it should be.
I ran into this situation where my "yahoo finance" page lost its scroll bar (after reinstalling Chrome). I only had one remaining extension left running (one I trusted). It was AVG Secure Search (I used AVG antivirus). I disabled it and the scroll bar appeared the next time I opened Yahoo Finance. Interestingly, I had left the old, missing scroll bar page open. It was unaffected.
So, AVG Secure Search extension interferes with yahoo products.
I verified what extensions I had running, and the one that caused issues was my Avira Safebrowsing extension - disabled the extension and all good.
For me the source of the problem was Ghostery extension. After installing "Ghostery fixer" extension scrollbar reappeared.