Scroll Anchoring in Firefox 66

Firefox 66 was released on 03 19th with a feature called scroll anchoring .

It’ s based on the new CSS specification that was first implemented by Stainless, and is now available in Firefox.

Have you ever had this encounter before?

You were reading headlines, but then a good ad loads and moves whatever you were reading off the screen.

Or how about this?!

You turn your phone, but now you can’ t find the paragraph that you had been just reading.

There’ s a common cause for both these issues.

Browsers scroll by tracking the distance you are from your top of the page. As you scroll close to, the browser increases or reduces your distance from the top.

But what happens if a good ad loads on a page over where you are reading?

The particular browser keeps you at the same range from the top of the page, but now there is certainly more content between what you’ re reading and the top. Essentially, this moves the visible portion of the page up away from what you’ re reading (and oftentimes to the ad that’ s just loaded).

Or, what if a person rotate your phone to family portrait mode?

Now there’ s much less horizontal space to the screen, and a paragraph that was 100px high may now be 200px tall. If the section you were reading was 1000px from the top of page before rotating, it may certainly be 2000px from the top of the page after revolving. If the browser is still scrolled in order to 1000px , you’ ll be looking at content far over where you were before.

The key insight to fixing problems is that users don’ t treatment what distance they are from the top of page. They care about their place relative to the content they’ re taking a look at!

Scroll anchoring works to anchor the user to the content that they’ re looking at. As this content will be moved by ads, screen shifts, screen resizes, or other leads to, the page now scrolls to maintain you at the same relative position into it.

Demos

Let’ s take a look at some examples associated with scroll anchoring in action.

Here’ s a page with a slider that modifications the height of an element on top of the page. Scroll anchoring stops the element above the viewport from changing what you’ lso are looking at.

Here’ s the page using CSS animations and transforms to change the particular height of elements on the web page. Scroll anchoring keeps you taking a look at the same paragraph even though it’ t been moved by animations.

And finally, here’ s the original video clip of screen rotation with scroll anchoring disabled, in contrast to the see with scroll anchoring enabled.

Notice how we jump to an not related section when scroll anchoring will be disabled?

How functions

Scroll anchoring functions by first selecting an element of the DEM to be the anchor node and then attempting to keep that client in the same relative position to the screen.

To choose a good anchor node, scroll anchoring utilizes the anchor selection algorithm . The algorithm attempts to pick content material that is small and near the top of page. The exact steps are somewhat complicated, but roughly it works simply by iterating over the elements in the DEM and choosing the first one that is noticeable on the screen.

If a new element is added to the particular page, or the screen is rotated/resized, the page’ s layout must be recalculated. During this process, we verify if the anchor node has been relocated to a new location. If so, we scroll to keep the page in the exact same relative position to the anchor client.

The end result is that modifications to the layout of a page over the anchor node are not able to replace the relative position of the anchor client on the screen.

Internet compatibility

New functions are great, but do they crack websites for users?

This feature is an intervention . It breaks established behavior from the web to fix an annoyance just for users.

It’ ersus similar to how browsers worked to avoid popup-ads in the past, and the ongoing function to prevent autoplaying audio and video.

This type of workaround comes with some danger, as existing websites have requirements about how scrolling works.

Scroll anchoring mitigates the risk along with several heuristics in order to disable the feature in circumstances that have caused problems with existing sites.

Additionally , a new CSS property has been introduced, overflow-anchor , to allow websites in order to opt-out of scroll anchoring.

To use it, just include overflow-anchor: none on any scrolling component where you don’ t want to make use of scroll anchoring. Additionally , you can add overflow-anchor: none to specific elements that you want in order to exclude from being selected since anchor nodes.

Obviously there are still possible incompatibilities with current sites. If you see a new problem caused by scroll anchoring, please document a bug !

Future work

The particular version of scroll anchoring delivery now in Firefox 66 is definitely our initial implementation. In the a few months ahead we will continue to improve this.

The most significant effort calls for improving the algorithm used to choose an anchor.

Scroll anchoring is most effective when it chooses an anchor that’ s little and near the top of your display.

1. If the point is too large, it’ s probable that content inside of it will broaden or shrink in a way that we won’ t adjust for.
2. If the anchor is too far from the very best of the screen, it’ s feasible that content below what you’ re looking at will expand plus cause unwanted scroll adjustments.

We’ ve discovered that our implementation of the specification may select inadequate anchors on webpages with table layouts or substantial content inside of flood: hidden .

This really is due to a fuzzy area of the specification exactly where we chose an approach different than Chrome’ s implementation. This is one of the ideals of multiple browser implementations: We now have gained significant experience with scroll anchoring and hope to bring that towards the specification, to ensure it isn’ to defined by the implementation details of just one browser.

The scroll anchoring feature in Firefox continues to be developed by many people. Thanks go out in order to Daniel Holbert, David Baron, Emilio Cobos Á lvarez, and Hiroyuki Ikezoe for their guidance and many testimonials.

A lot more articles by Ryan Hunt…

If you liked Scroll Anchoring in Firefox 66 by Ryan Hunt Then you'll love Web Design Agency Miami