[Bug Report][3.0.0-beta.14] v-parallax sometimes covers whole page or zooms incorrectly

[baermathias]

Environment

Vuetify Version: 3.0.0-beta.14
Vue Version: 3.2.41
Browsers: Chrome 106.0.0.0
OS: Linux x86_64

Steps to reproduce

Check the codesandbox example and click between Go to About and Go to Home for navigation.

Expected Behavior

To work as in docs example

Actual Behavior

When navigating to the page with the v-parallax component, the component sometimes covers the whole page and sometimes not. If it does cover the whole page, then you can scroll down a little bit and the effect disappears.
Also when using it with the latest nuxt version it behaves in a way that it sometimes zoomes in very strongly and sometimes not.

Reproduction Link

https://codesandbox.io/s/reverent-robinson-gotfgx

[yuwu9145]

Doesn't look like a vuetify bug as the sample reproduction code is somehow missing vuetify styles.

It works all good after putting <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vuetify@3.0.0-beta.14/dist/vuetify.min.css" /> into index.html

[KaelWD]

Good catch, the initial scale is still too high though.

somehow missing vuetify styles

Looks like webpack 4 uses exports.require for import { createVuetify } from "vuetify"

[yuwu9145]

scale too high is caused by NOT using v-app in root.

With v-app applied, all working perfectly: https://codesandbox.io/s/red-voice-09491y?file=/src/components/Layout.vue

[KaelWD]

• v-app is optional
• still happens sometimes if you just put a plain div around the router-view

[yuwu9145]

I can replicate the issue with plain div