Blur backdrop filter on navbar noticeably impacts scroll performance

[vberlier]

Describe the bug

The blurred background on the navbar looks nice but I noticed that it causes some lag when scrolling. I used the "Rendering" tab in the chrome devtools to measure the actual impact on performance and it looks like disabling the backdrop-filter property in the inspector improves the framerate by almost 30%.

This is a common problem that plagues the "frosted background" trend. If the content behind an element with a blurred backdrop updates rapidly (such as when scrolling), the page will start to stutter. This is even more noticeable on 4k displays where the blur filter has to process a lot more pixels.

backdrop-filter enabled	backdrop-filter disabled

Reproduction

To gather the above metrics I opened the official vitepress website and held the down arrow key to scroll continuously for a few seconds. For testing without the blur effect I disabled the backdrop-filter property on the VPNavBar component in the inspector.

Expected behavior

This could be solved by removing the blur effect or only enabling it at low dpi using a media query. Another option would be to make it easy to disable the blur effect when extending the default theme.

System Info

Chrome 103, Windows

Additional context

No response

Validations

• Follow our Code of Conduct
• Read the docs.
• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.

[gmqiyue]

has same problem on macos12.5/chrome 106

[kiaking]

I've removed blur background due to design finalization at #1790.