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.
Related
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.
The HTML and CSS are rather large so I can't pinpoint the issue or post a good example. When I toggle through my UI, the css styling seems to break, the most jarring of which is that the background changes to grey. I was wondering if anyone encountered similar issues. Here are some of the conditions for me.
-Chrome: Firefox & Safari working fine
-Small Screen: Problem doesn't occur on larger monitors
-Toggling developer console on and off fixes the issue
It's difficult to try and pinpoint the issue without seeing some code or even a fiddle, but when you open the inspector the page is resizing, and so redrawing (at least some of) the elements. It's also possible that there's a cache issue - I believe by default when you open the inspector the cache is disabled and so all css and scripts are downloaded again. That said, if you aren't refreshing the page it with the inspector open its unlikely to be that.
My money would be on the window effectively resizing when you open the inspector, and so some (if not all) elements are forced the redraw and thus re-evelauate their styles.
Maybe you could use Chrome's timeline to check what is being painted as time goes by. Try running that and opening the inspector while its active to try and see whats going on.
Looks like a long standing bug (years) with webkit:
How can I force WebKit to redraw/repaint to propagate style changes?
The solution that appeals to me is:
$('#body').hide().show(0); from Force DOM redraw/refresh on Chrome/Mac
to force a redraw.
I am developing website and have a strange bug that appears only on Chrome. I have a latest Chrome version and as I googled it seems to be old bug on older versions of Chrome(v18 - v20). Basically what happens: browser loads page, but on the bottom of the screen I have white spaces/rectangles instead of content or footer. Once I hover it - the rest of the content is loaded. Any ideas, links or solutions would be great.
I tried to work with this around with setting height to auto, but this didn't help. Also tried to load page in incognito to make sure it is not caused by any of the extensions I use, but this as well had no affect in resolving the issue.
Another solution that I think of is to set interval to re-trigger CSS in some milliseconds the page is loaded, but this is not the best solution and there should definitely be some other, more optimal, way to solve this.
P.S.:
All other browsers work like a charm.
Thanks in advance for the help.
In my case issue was with fade-in animation set on whole content. As website owner decided to skip the animation to save time. No further digging was done.
I am a web developer for a small company and we recently noticed a strange graphical issue with our website that only appears for users using Google chrome on windows 7 and 8.
The graphical issue occurs when our banner images fade in and fade out, all of the content below the navigation UI flashes white.
This issue is resolved if chrome is run in windows 8 mode though not if hardware acceleration is disabled.
Weirdly enough something else that fixes the bug is opening the developer tools window by inspecting an element, very unusual.
Is there any kind of fix I may have to add to the pages CSS similar to styling specifically for Internet Explorer?
Try to move the following script include right down to the bottom of your page, right above the last </body> tag.
<script type="text/javascript" src="http://ecogrid.co.uk/js/magentothem/bannersequence/jquery.sequence-min.js"></script>
It works for me, at least in the browser. I think the issue was related to the order of the code and perhaps the conflicting of jquery fade effects in the menu and the sequential slider.
This is non related but... good practice. Whilst your at it you may want to move many other 'render blocking elements' down below the fold as well, this is better for load time optimization. But of course for more info see: https://developers.google.com/speed/docs/insights/BlockingJS
For some reason, black boxes are displaying in random spaces in Chrome (latest build).
Some of these boxes are appearing outside of the main container, whereas some are appearing inline, covering content blocks. They appear randomly, usually after scrolling, and will often disappear when opening the inspector, hovering over elements, or scrolling down and back up.
For reference, there are some animations, box-shadows (which have been disabled with no luck), linear gradients, and position: fixed elements on the page, although this is not an issue with browsers other than Chrome.
This has been widely reported in user testing, although I have not been able to conjure up a fix. I am not sure if it is a CPU or graphics card issue, as the site is relatively lightweight and I am browsing with a new laptop with 16gb ram. My old Mac Mini, with 4gb of ram, does not produce this issue.
Any pointers would be most appreciated.
Update: This was a bug in Chrome and was fixed: https://code.google.com/p/chromium/issues/detail?id=142038
eddz filed the issue at crbug.com/new and over 40 people starred the ticket to follow along. It led to a few separate fixes in Chrome by the engineering team.
I had this issue with a website that was using transformZ (0) to force GPU rendering. When I removed this style the issue disappeared
This isn't an answer, but if you are able to somehow reproduce it maybe later on down the road:
Make a copy of the page locally, or anywhere, set the base href to the main domain, now start removing css links and js scripts from the bottom to the top until you don't experience the behaviour anymore, if you get to that point then the last script/stylesheet you removed is the culprit.
If you find the culprit file, now try finding the culprit line/section.
If you don't get to that point, it may be the browser, but it doesn't sound like it is.
It may also be linked between scripts/stylesheets and/or accidentally inherited.
We had experienced this weird blocks too on our website. In past we was using transitions, transitions was reproducing another bug "weird lines" randomly appeared on page and dissapear during scroll.
Now we start using transformX-Y, may be in some places Z too. And we have got this hell bloack blocks.
It seems something wrong in Chrome with transfom + transition animations. May be this bug appear when too much blocks animated at one time?
FF works fine.
I encountered these same boxes. For me, the problem was that I was using mp4 videos, which are deprecated in chrome, instead of webm videos.
I think is related to the GPU I had the same issue on my website. And it stopped happening when I turned on the Metal Rendering flag.
My website renders back bgs randomly while scrolling. It is really heavy on videos and animations and looks like chrome has so little GPU available that graphic intensive website doesn't work correctly on blink. I noticed that when chrome used webkit those issues didn't happen.
I this is a blink render issue.