Transformed elements look blurry in Chrome

[xaviarnl]

Describe the bug

Elements in the slider which are transformed, such as the dot handle and a tooltip, are rendered blurry specifically in newer Chrome versions (I am using version 78):

You can get to a state like this, but showing a dot in the slider (possibly combined with showing tooltips). After moving the dot, the dot itself as well as any shown tooltip, are blurry.

This is caused by a bug in the "will-change" property which Chrome has introduced. See https://greensock.com/will-change for more information about this.

For now, the best option - I think - would be to not use this attribute.

I fixed it in my application by adding "will-change: auto" to the .vue-slider-dot class in my CSS. This wasn't perfect, however, as then a tiny gap of 1 pixel appeared between the tooltip text bubble and the tooltip handle. So I fixed that too (for now) with the following CSS:
@supports (will-change: transform) {
.vue-slider-dot {
will-change: auto;
}
.vue-slider-dot-tooltip-inner-top:after {
transform: translate(-50%, -1px);
}
}

[NightCatSama]

Can removing will-change: transform fix the problem of blurred fonts?

[xaviarnl]

It most likely will. With the information I mentioned above, you should be able to reproduce this bug quite easily. And then check if removing the "will-change" solves the issue.
Even though, of course, it is actually Chrome which should fix this bug, but we do not know when they will do this.

[NightCatSama]

As far as I know, using transform in chrome may cause blur.

But I don't know if will-change might increase the degree of blur.

I can reproduce the blur effect (with or without will-change), but not as serious as your picture.

If the problem is with the transform, I can't think of any way that can replace it.

But if will-change will make the blur worse, I can remove it.

[xaviarnl]

I noticed that when I, in the Chrome Developer Tools, unchecked the "transform" property in the CSS, the tooltip was completely sharp & not blurred (of course, it was also misplaced now, but it proved that the transform was the problem).

[NightCatSama]

Thanks for your feedback, will-change was removed in 3.0.44