[Bug Report] v-toolbar height bug on Chrome when SSR with Nuxt

Versions and Environment

Vuetify: 1.2.5 Vue: 2.5.17 Nuxt: 2.1.0 Browser: Chrome 69.0.3497.100 OS: macOS 10.13.6

Steps to reproduce

No link sorry, as the bug requires Nuxt in production mode.

In terminal:

npx create-nuxt-app toolbar-bug

Chose Vuetify when asked for a UI framework

cd toolbar-bug

Open /layouts/default.vue, change the “drawer” data to false so you can better see the bug

npm run build
npm run start

Go to localhost:3000 with Chrome. Refresh the page. At each refresh you can see the toolbar height change after the page loads. If you disable javascript in Chrome (chrome://settings/content/javascript) the toolbar height does not change

Expected Behavior

Nuxt server side renders the toolbar with the correct height

Actual Behavior

Nuxt server side renders the toolbar with a height, then client side renders toolbar with another height

Reproduction Link

No link sorry, as the bug requires Nuxt in production mode.

---

Additional Comments:

I tried to find the minimal code where the bug happens. It appears that if you remove the two navigation drawers AND all the buttons on the left of the toolbar title, then there is no bug.

I have no idea if this belongs here or on Nuxt issues page.

[KaelWD]

The toolbar height is set with JS, and the server does not know the client’s screen size so it uses the mobile breakpoint. The material design specification is for 56px on mobile and 64px on desktop, so the height has to change once the JS has been executed. If you don’t like this then don’t use SSR.

[magyarb]

I am having the same issue. It could be solved by removing the js that sets the height, and do it in css instead. It would look something like this, respectively for the three breakpoints:

@media only screen and (min-width: 959px) {
  div.v-toolbar__content{
  height: 64px;
 }
}

Of course the v-content’s top padding should be set in css too.