X
Tech

Google Chrome's latest leap forward? Stopping those jarring page-load jumps

Google is working on a solution in Chrome to prevent ads causing you to lose your spot on a page.
Written by Liam Tung, Contributing Writer

Google's Chrome 56 locks the scroll position on an on-screen element to prevent a jump as other content continues loading offscreen.

Image: Google

Google is fixing the jarring page jump that happens when Chrome gradually loads a webpage.

The latest version of Chrome has a new feature called 'scroll anchoring', a technique Google is using to counter a side-effect of progressive loading, a feature that helpfully allows you to read a page before it's finished loading, but can trigger a page jump as new content is loaded off screen, pushing down what's on screen.

Those jumps are distracting for readers who are midway through a paragraph and more likely to occur on smartphones due to the smaller screen space. Even more annoying is that ads can trigger the page jump, too.

Google rolled out the anchoring in Chrome 56, which locks the scroll position on an on-screen element to prevent the jump even as other content continues loading offscreen.

"Scroll anchoring is one of our favorite kinds of features -- those that shine when no one notices them. Today we're preventing an average of almost three 'jumps' per pageview, and we're still getting better," said Google's Steve Kobes.

Google has also appealed to web developers to improve Chrome's ability to prevent these unexpected page jumps.

However, it also notes that Chrome could apply scroll anchoring in an unwanted way for some sites and it has disabled the feature for complex interactive layouts.

Google has proposed scroll anchoring as a specification in a W3C Community Group Draft Report, though it's not a W3C Standard.

"This spec proposes a mechanism to mitigate this jarring user experience by keeping track of the position of an anchor node and adjusting the scroll offset accordingly," it notes.

The feature works by selecting a Document Object Model (DOM) node, which it calls the anchor node, "whose movement is used to determine adjustments to the scroll position", the spec page says.

READ MORE ON GOOGLE

Editorial standards