[Bug Report] v-navigation-drawer comes back blurry after hiding on Edge and Google Chrome

[karleinarb]

Environment

Vuetify Version: 2.3.6
Vue Version: 2.6.11
Browsers: Edge 87.0.664.66
OS: Windows 10

Steps to reproduce

1. Open the provided CodePen
2. Hide the nav-drawer with the hamburger-button
3. Show the nav-drawer by clicking the button again

All items in the nav-drawer is now blurry.

This holds true for Google Chrome and Microsoft Edge
Mozilla Firefox does not have this issue

Expected Behavior

All list-items should stay crisp before and after hiding the nav-drawer

Actual Behavior

List items get blurry after un-hiding

Reproduction Link

https://codepen.io/Karl-einarb/pen/XWjqXGr

[karleinarb]

After closer inspection I can see that there are multiple sharpness differences where Firefox is always the sharpests.
But it is most noticable on the navigation-drawer

[dmcknight26]

FWIW I am experiencing the same thing, whether it's a permanent drawer or a temporary one that I continually toggle. Sometimes it's blurry, sometimes it's not.

I've found that clearing out the will-change CSS property has helped.

.v-navigation-drawer {
  will-change: initial;
}

[drocha87]

FWIW I am experiencing the same thing, whether it's a permanent drawer or a temporary one that I continually toggle. Sometimes it's blurry, sometimes it's not.

I've found that clearing out the will-change CSS property has helped.

.v-navigation-drawer {
  will-change: initial;
}

Indeed it seems to fix the problem.

[yGuy]

The "blurriness" is when the chrome engine disables subpixel rendering (aka ClearType). This is an optimization when the engine expects text to be moved, scaled, etc because during movement subpixel rendering can look worse. It should not be applied when the text stands still, but the "will-change" hint probably messes with this.

I have also seen similar effects in my vuetify main bar - when seemingly unrelated items in the toolbar get hover effects, other parts of the toolbar get subtle repaints (visible with repaint highlights in the devtools) and text switches from simple anti-aliased (blurred) to subpixel rendering (crisp) if you look closely or use the magnifier tool to look at the colors of the pixels.

[yGuy]

There's a lot of warnings here about using the "will-change" property on MDN - could be that some of them should be taken more seriously if we want to get rid of these issues.

[yGuy]

@KaelWD - do you want me to open another issue that is about going over the problematic usages of will-change or can we increase the priority of this bug? After all it makes many vuetify powered applications look bad on browsers that have the greatest market share in most countries of the world.
I understand that people are not all equally receptive to this kind of problem, but I know that there is large share of people that are extremely annoyed by this (because I am one of them). As soon as I see blurry, text, that really itches and I tend to turn away from apps that show this. It's like looking at a really low resolution, jpg full of artefacts on a HighDPI device. It simply looks completely unpolished. Considering that the original intent of putting this attribute in the CSS was to achieve exactly the opposite is especially sad:
Looking at the documentation on MDN, I would say the static usage of the will-change attribute as it is now the case in the vuetify.css is simply wrong and against the recommendation (actually it's part of the "what you should not do" recommendation).
What do you think?

[KaelWD]

At the time this was basically mandatory for fixed position elements as they would repaint on every scroll otherwise. We can look into if this is still necessary or if there is a better solution now. No need for another issue, but you're welcome to submit a patch if you like.

[ragnaroks]

my solution,and works fine

<template>
  <v-navigation-drawer v-model="drawer1" class="drawer1" app temporary :style="style1">
    <v-list nav dense>
      <v-list-item link to="/default/">
        <v-list-item-icon><v-icon>mdi-home</v-icon></v-list-item-icon>
        <v-list-item-title>Home</v-list-item-title>
      </v-list-item>
    </v-list>
    <v-divider />
    <v-list nav dense>
      <v-list-item link to="/user/">
        <v-list-item-icon><v-icon>mdi-account</v-icon></v-list-item-icon>
        <v-list-item-title>User</v-list-item-title>
      </v-list-item>
      <v-list-item link to="/articles/">
        <v-list-item-icon><v-icon>mdi-newspaper</v-icon></v-list-item-icon>
        <v-list-item-title>Articles</v-list-item-title>
      </v-list-item>
    </v-list>
    <v-divider />
    <v-list nav dense>
      <v-list-item link to="/default/signout/">
        <v-list-item-icon><v-icon>mdi-logout-variant</v-icon></v-list-item-icon>
        <v-list-item-title>Sign Out</v-list-item-title>
      </v-list-item>
    </v-list>
  </v-navigation-drawer>
</template>

<script>
export default {
  name:'AppMenuPartial',
  data:function(){
    return {drawer1:false};
  },
  computed:{
    style1:function(){
      //"256px" is your setting
      return {width:this.drawer1?'256px':'0px'};
    }
  }
};
</script>

<style scoped>
.drawer1{transform:none !important;transition-property:'width';}
</style>

[smares]

Out of curiosity, can you check if enabling "Composite after paint" in chrome://flags/ fixes the issue with will-change still in place?