Microsoft has been actively contributing to the open-source Chromium that has replaced EdgeHTML in Microsoft Edge. Microsoft plans to bring a lot of new capabilities and improvements to the open-source platform, and it will benefit all Chromium browsers including Chrome.
Microsoft is also porting Edge-style smooth scrolling to Chromium and the company has now proposed a new series of changes to further enhance the experience.
As a two-year-old bug post on Chromium noted, Chrome’s performance takes a hit when scrolling on certain webpages with a large number of elements set to the sticky or fixed position.
In theory, position: sticky allows an element to keep showing on the screen throughout scrolling. For example, titles of webpages or text in the menu that remain placed on the top of the screen when you scroll.
A Chromium developer notes that tests revealed 13% CPU hikes on Windows and CPU increases more than 100% upon scrolling with trackpad and mouse wheel respectively.
The bug has been ignored for more than two years, but an engineer from Microsoft Edge team has figured out a solution and observed the following improvements:
- Significant improvements in Blink.MainFrame.UpdateTime (~50%) around compositing lifecycle updating.
- Significantly more main-thread frames were produced on my dev machine (857 to 1375).
- Smoothness metric increased from 87% to 94%
Windows Performance Analyzer revealed ~22% main thread CPU-time improvement. “This was for a manual scenario where I held down the ‘down arrow’ key for ~60 seconds after page load,” wrote Sam Fortiner, Principle Software Engineer at Microsoft.
A commit with the following details has been marked active:
Enter assumed-overlap mode after encountering a fixed or sticky element. This speeds up composited scrolling, because it no longer has to re-do the overlap test on every frame.
New look of radio and checkbox
On Windows 10, Microsoft is also implementing a new look for radio and checkbox on a webpage. According to a commit, this change will allow the radio and checkbox to use Windows 10’s accent color.
“This CL implements the new look of radio (accent color), checkbox (accent color and indeterminate state), range (accent color),” a commit reads.
