Thursday, January 25, 2018

Google Chrome is Adding a Feature to Reduce Annoying Page Jumps When Navigating Forwards/Backwards

Browsing the web wasn’t always a great experience. Between the time smartphones hit the market and dumb phones dominated, underpowered devices had trouble rendering websites designed with desktops in mind. Since then, the mobile web has evolved with things like responsive design, optimization frameworks like Accelerated Mobile Pages (AMP), and more. Google, for its part, is working on a scroll anchoring feature it started testing in Google Chrome two years ago to reduce page jumps.

It was back in summer 2016 when we wrote about an experimental Chrome feature that the engineers at Google had been testing: Scroll anchoring. It prevents the annoying text reflow issues that occur when the Google Chrome browser loads offscreen content, an issue that’s gotten people frustrated because it causes accidental taps on ads, photos, and links.

Scroll anchoring was experimental and in active development until April of 2017, when it was pushed to the stable version of Chrome for Android. It’s improved the user experience of Chrome immensely, but Google didn’t stop there. The search giant has expanded upon scroll anchoring with what it calls scroll anchoring serialization, which aims to reduce the page jumps that sometimes happen when you’re navigating forwards and backwards on a website.

It’s pretty clever. Chrome’s default scroll behavior restores and saves absolute value pixel offsets. Scroll anchor serialization, by contrast, restores your scroll position via the scroll anchor, instead, allowing the page anchor to be established earlier and preventing reflows during the page load that might cause visible jumps.

The new feature, the commit for which can be found here, needs to be enabled via a Chrome flag. Clicking on this link in Chrome for Android will take you right to the corresponding scroll anchoring serialization toggle in the chrome://flags page. To get it working, enable the flag and restart Chrome for it to take effect.

HostGator Web Hosting

0 comments:

Post a Comment