So I'm building a rendering system for my app that pulls objects from a collection and runs em through js templates to create more children while the page is being scrolled. Essentially it detects when the bottom of the container is reached and removes the top row of rendered elements and appends a row of templated objects to the bottom of the container, and likewise but reverse for scrolling to the top.
The functionality itself isnt an issue. I've got it working 100% in chrome, but the issue starts in other browsers. In chrome, its as if the container scrolls forever, but in safari/firefox when the scroll hits the bottom, the new rows are rendered, but the scroll stays at the bottom so it looks like the last row is constantly being replaced by the next row to render.
My question is how can I determine the differences of how the scroll is operating so I can figure out a solution?
So the difference that was happening was that chrome had a new feature they built in called scroll anchoring. They added it so new content being added to pages would not jerk the scroll around. It just so happened to be a missing piece of the rendering system i was building that wasn't missing only on chrome. I emulated what it was doing in my own code now it works right on all other browsers.
To anyone curious, chrome has a css control to that behavior called overflow-anchor: auto or none;
More info about "Scroll Anchoring"
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.
So, I'm having a strange issue in chrome (Version 33.0.1750.154) where, when the site is first opened, the navigation in my header gets pushed down and outside of the header for some reason. Upon refreshing the site, the navigation returns to where it should be and doesn't cause any issues. I've noticed that the positioning is messed up ONLY when you first open the site (for example, if I close the tab and reopen it a few times, it'll randomly happen but it won't ever happen if I refresh the site). It works exactly like it should in Firefox.
The site is live here: http://ayushman.us/
Similar problem in this question (navbar positioning bug in chrome) but the solution doesn't seem to be working for me. Any ideas?
Note: If you open the link and the header is aligned, close the tab and reopen at least three times (closing each time it works fine). For some reason, the third time is when it messes up for me.
I added fancybox to a page to display a youtube or vimeo video when a person clicks on a thumbnail. When the popup opens everything looks fine but if you scroll on the page instead of staying in the fixed position the popup overlay and the popup itself scroll with the page. The iframe actually stays in it's fixed position though. Also it causes rendering artifacts to show up like duplicate popups.
It looks like it's actually some sort of rendering bug because the artifacts aren't really there. To fix this I added a scroll listener in javascript that adds and removes 1px of padding on the top of the body. This causes the browser to redraw the screen, i'm guessing, which repositions the overlay/popup and cleans up the artifacts.
This doesn't seem like a proper solution for this so I'm looking for alternate solutions to prevent this problem or at least a link to someplace confirming it's a rendering issue.
I'm using fancybox2 in the newest version of chrome on mac.
My workaround
options['fixed'] = false;
options['afterShow'] = forceUpdateUI;
options['afterClose'] = forceUpdateUI;
$.fancybox(
"hello world",options
);
}
function forceUpdateUI(){
$('body').addClass('dummy-class');
setTimeout(function(){
$('body').removeClass('dummy-class');
},500);
}
.dummy-class{
padding-top:1px;
}
I was trying to design this site:
http://bylc.org/summit2012/
When I was working offline in my pc everything was alright. But when I uploaded it in the server, the problems started to show up.
When I try to load the file for the first time everything seems to load correctly but after reloading the page the carousal stops working and the right part (side bar) of the page gets down and renders some text in different color and font. Also there becomes a little space between the carousal and the side bar.
I've tried everything in my knowledge. tried X-UA-Compatible, stopped all javascript in the page. But nothing did work. :( Could anyone please check and help.
Disabling scripts altogether caused the errors to occur on initial load as well as on subsequent loads, which leads me to believe it has something to do with the order of things loading in your page.
I suggest moving your script declarations from the head to just before your closing body tag to ensure they load as quickly as possible.