Microsoft Microsoft Edge team blog to share how they make the new Edge scrolling effects, including improvement and optimization scroll scrolling animation experience (interaction and appearance).
In the old Edge, a team through the operating system Compositor (DirectComposition) and input tightly integrated API (Direct Manipulation) to achieve a consistent and Windows systems smooth scrolling effect (Smooth Scrolling). Because both Microsoft products, so Edge team in the realization of this effect is not much of a hindrance.
But tightly integrated with the operating system disadvantages are also obvious - it is difficult to apply the same experience ported to other operating systems, including older Windows systems. Worse, although this program is independent of the browser main thread to handle input and output to improve the response rate and offers a stable frame rate, but for the frame according to the update script to perform the update was ineffective, leading to appear jitter, which is one of the most common feedback was received from the team.
To this end, the new version of Microsoft Edge, the team learn from past experience, the desire to improve Microsoft Edge and all rolling effect Chromium-based browser, and in the beginning made it clear one thing: merely had to Windows operating system copied from the same dependence is not feasible, because Microsoft Edge and other Chromium-based browsers have very high standards and cross-platform compatibility requirements.
On this basis, Edge team we take into account user feedback and technical solutions, as well as open standards, they decided to focus first on maximizing effects on optimization rolling and improve performance.
To sum up, Edge team improved Microsoft Edge scrolling effect include:
-
Improved scrolling animation curves
-
Using the percentage-based rolling
-
The introduction of the rebound effect when scrolling in the end
-
Edge into an old version of part scrolling effect
Improved scrolling animation curves
Animation curve changes such that the scroll speed improved more natural, rolling becomes slightly longer time, so that the user can feel the animation. In simple terms, this curve allows scrolling and touch done by mouse wheel, the keyboard or scroll bar to scroll has a smooth effect in legacy Edge.
Change in the upstream portion of Chromium:
- Add Impulse-style scroll animations
- Refactored ScrollOffsetAnimationCurve to facilitate new animations
- Implement new Windows fling animation curve
- Fling Animation Curve – Part 1
- Fling Animation Curve – Part 2
Using the percentage-based scrolling (Percent-based scrolling)
Sliding the scroll bar, Chromium using fixed scroll increment value (using the mouse wheel to increase 100px, using the scroll bar of a button or the keyboard arrows to increase 40px). Edge team changes this behavior, it uses the legacy Edge in the program: to calculate the height of the scroll bar to scroll through incremental value rather than the benefits of doing so is that when the scroll bar height is small, the browser can still provide a reasonable range of rolling to browse content.
Change in the upstream portion of Chromium:
- Add percent-based scrolling for Windows
- Add main thread percentage scrolling for keyboard and scrollbar
The introduction of the rebound effect when scrolling in the end (Overscroll bounce)
Overscroll bounce is mainly a signal sent to the user, informing them has scrolled to the bottom or top of the page, similar effect is also known as a rubber band or elastic scrolling effects. Microsoft Edge scroll in any direction are joined this effect.
The introduction of part of the rolling effect of the legacy Edge
scroll chaining vs. scroll latching
scroll chaining legacy Edge program is used, the effect is that it provides a scroll bar when the child reaches the boundary, the father of the scroll bar will scroll automatically follow.
Similar scenes, have the Chromium scroll latching concept of difference between the two is that the latter will concentrate all the scroll operation to scroll the same jump. Edge team pointed out that almost all users prefer to scroll chaining (97% favorable), so they decided to use the scroll chaining in Microsoft Edge in, but are not intended to be introduced into Chromium.
Inertial sliding acceleration (Fling boosting)
This effect is mainly to enhance the speed of fast scroll, while integrating the animation curves. For example, when the user wants to quickly pull to the bottom of the page, fling boosting not only offers a friendly animation, but also speed up the scrolling speed.
Microsoft hopes Microsoft Edge incomplete copy EdgeHTML programs, but combine the advantages of Chromium and EdgeHTML make improvements. To this end, they are evaluating other effects, and how to apply these improvements in the upcoming update, these effects currently include:
- The rebound effect of the sub-scrollbar (overscroll effect)
- Zoom rebound effect operations