Problem with vue-cli project and Vuetify

[reynard80]

We have a strange problem that has been bugging our project for some time now.

In the project, some components, like buttons and tabs, move slightly after they have been loaded. This problem can’t be reproduced in codepen, but it exists in every new Vue-cli project we start.

On this Codepen the problem doesn’t occur.

And on GitHub the problem does occur in a fresh Vue-cli project with the same App.vue. Of course, the project can be run with npm install.

If you pay close attention (which our customers do), you see the button text, the icon on the dialog and the tab titles move after the modal has been opened.

Even after a lot of experimenting, we haven’t been able to pinpoint the cause of this problem. Any help would be greatly appreciated!

P.S. Project initialization options:

Vue-cli project options

Vue-cli 5.0.3 (but did occur with older versions just the same)
Vue 2
Typescript
Babel
Router
Vuex
Dart-scss
SFC

Vuetify options

No custom theme
No custom variables
Material Design Icons (both offline and online, doesn't matter)
A la carte components

P.S.2. The only notable issue during configuration of the project is this warning:

 WARN  conflicting versions for project dependency "sass-loader":

       - ^12.0.0 injected by generator "undefined"
       - ^10.0.0 injected by generator "vue-cli-plugin-vuetify"

       Using newer version (^12.0.0), but this may cause build errors.

[18379644377]

I also encountered the same problem, have not been able to solve, can not reproduce

[18379644377]

Hi, have you found a solution yet?

[reynard80]

It seems to be a subpixel rendering issue of the browser. So no vue or vuetify issue.