Bug: Frequent triggering of redrawing of navigation bar icons

[dl2458697735]

Describe the bug

The arrow icons in the navigation bar frequently trigger redrawing

Reproduction

[class^='vpi-']:not(.bg), [class*=' vpi-']:not(.bg), .vp-icon:not(.bg) {
/* -webkit-mask: var(--icon) no-repeat; */
mask: var(--icon) no-repeat;
-webkit-mask-size: 100% 100%;
mask-size: 100% 100%;
background-color: currentColor;
color: inherit;

Expected behavior

I hope to use SVG and other methods instead of using masks to display icons, which can avoid frequent redrawing

System Info

"vitepress": "^1.6.4",

Additional context

Validations

• Check if you're on the latest VitePress version.
• 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.

[brc-dd]

The arrow icons in the navigation bar frequently trigger redrawing

When? For me there is no redrawing unless I interact with them, and that too is because their color is changed on hover. Do you have some moving objects in background in your site or something?

Using mask is a common approach to avoid increasing bundle size with repeated icons, and it's not that CPU intensive IMO. For example the MDN site also uses masks for icons now.

属性选择器 [class^='vpi-'] 匹配范围广

No it doesn't. It only matches the vitepress icons.

与 transform 、 opacity 不同，mask 通常无法被 GPU 高效处理，容易导致CPU 渲染瓶颈。

This is most likely also wrong. I can see clear spikes in GPU memory usage when the repaint occurs. Not sure if there is any better way to verify that.

[dl2458697735]

The arrow icons in the navigation bar frequently trigger redrawing

When? For me there is no redrawing unless I interact with them, and that too is because their color is changed on hover. Do you have some moving objects in background in your site or something?

Using mask is a common approach to avoid increasing bundle size with repeated icons, and it's not that CPU intensive IMO. For example the MDN site also uses masks for icons now.

属性选择器 [class^='vpi-'] 匹配范围广

No it doesn't. It only matches the vitepress icons.

与 transform 、 opacity 不同，mask 通常无法被 GPU 高效处理，容易导致CPU 渲染瓶颈。

This is most likely also wrong. I can see clear spikes in GPU memory usage when the repaint occurs. Not sure if there is any better way to verify that.

You can open the browser console and then open the rendering tab to mark areas that are frequently redrawn. You can see that, for example, the navigation bar arrows frequently trigger redrawing

[dl2458697735]

This is the situation when I opened the console for monitoring, and I can clearly see that frequent triggering of redrawing is mainly caused by the mask attribute

repaint.mp4

[brc-dd]

It most likely is because of that time widget in your navbar. No such thing happens on the default theme.