How can Microsoft improve the scrolling of Microsoft Edge?

The Microsoft Edge team shared a blog about how they improved scrolling for the new Edge, including improving scrolling animations and optimizing the scrolling experience (interaction and appearance). In legacy Edge, the team achieved smooth scrolling consistent with Windows systems through tight integration with the operating system Compositor and The Input API .

Since both are Microsoft products, the Edge team doesn’t have much of a barrier to this.

But the drawbacks of tight integration with the operating system are also obvious — it is difficult to port the same experience to other operating systems, including older Windows systems. To make matters worse, while this scenario handles input and output independently of the browser main thread to increase responsiveness and provide a stable frame rate, it does not perform well on scripts that perform updates based on frame updates, resulting in jitter, which is one of the most common feedbacks the team received at the time.

To do this, in the new version of Microsoft Edge, the team learned from past experience, wanted to improve the scrolling of Microsoft Edge and all Chromeum-based browsers, and made one thing clear at the outset: It would not be feasible to simply copy the same dependencies as the Windows operating system, because Microsoft Edge and other Chromium-based the browser has high standards in compatibility and cross-platform requirements.

On this basis, the Edge team, taking into account user feedback and technical solutions, as well as open source guidelines, decided to focus on optimizing scrolling and improving performance.

In summary, the Edge team’s improvements to the Microsoft Edge scrolling effect include:

Improve dysed animation curves

Use percentage-based scrolling

Springback effect when rolling to the end

Some scrolling effects introduced to older versions of Edge

Improve dysed animation curves

The improved animation curve makes the change of scroll speed more natural, and the scrolling time is slightly longer, so that the user can feel the animation effect more. Simply put, this curve gives scrolling through the mouse wheel, keyboard, or scroll bar, as well as touch scrolling, smoothing in older Versions of the Edge.

Part of the upstream changes in Chromium:

Add Impulse-style scroll animations

Refactored ScrollErd AnimationCurve To to new animation

Implement new Windows fling animation curve

Fling Animation Curve – Part 1

Fling Animation Curve – Part 2

Use percentage-based scrolling (Percent-based scrolling)

When you swipe the scroll bar, Chromium uses a fixed scroll increment value (add 100px with the mouse wheel and 40px with the click button or keyboard arrow of the scroll bar). The Edge team changed this behavior by using the old Edge scenario: scroll bar height to calculate the scroll increment value instead of, with the benefit that the browser could still provide a reasonable scroll range to browse content when the bar height was small.

Part of the upstream changes in Chromium:

Add percent-based scrolling for Windows

Add main thread thread ling for keyboard and scrollbar

Springback effect when rolling to the end (Overscroll bounce)

Overscroll bounce primarily sends a signal to the user that they have scrolled to the bottom or top of the page, and similar effects are also known as rubber band effects or elastic scrolling. Microsoft Edge adds this effect to scrolling in any direction.

How can Microsoft improve the scrolling of Microsoft Edge?

Some scrolling effects that introduce older versions of Edge

scroll chaining vs. scroll latching

Scroll chaining is a scenario used by older Edge, which provides the effect that the parent scroll bar automatically follows the scroll when the child scroll bar reaches the boundary.

How can Microsoft improve the scrolling of Microsoft Edge?

In a similar scenario, Chromium already has the concept of scroll latching, which is different in that the latter concentrates all scrolling operations on the same scroll hop. The Edge team noted that almost all users prefer scroll chaining (97 percent positive), so they decided to use scroll chaining in Microsoft Edge, but didn’t plan to introduce it to Chromium.

Inertial Sliding Acceleration (Fling Boosting)

This effect primarily increases the speed when you scroll pages quickly, while integrating animation curves. For example, when a user wants to quickly pull to the bottom of the page, fling boosting not only provides friendly animation, but also speeds up scrolling.

How can Microsoft improve the scrolling of Microsoft Edge?

Microsoft wants Microsoft Edge to not exactly replicate The EdgeHTML scenario, but to improve it with the benefits of Chromium and EdgeHTML. To do this, they are evaluating other effects and looking at how to apply these improvements in upcoming updates, which currently include:

Bounce effect in subscroll bar (overscroll effect)

Bounce effect of the zoom operation