[Bug Report][3.4.3] V-App-Bar flickers when replaced by client-side-navigation

[ulfgebhardt]

Environment

Vuetify Version: 3.4.3 Vue Version: 3.3.8 Browsers: Chrome 119.0.0.0 OS: Linux x86_64

Steps to reproduce

When using vike with client-side-navigation the whole page is replaced when navigating. If this affects the v-app-bar a full rerender of the browser is triggered since it cannot identify the v-app-bar as unchanged for some reason.

In the provided repro its visible when navigating the main menu: The Image in the top left corner flickers due to the rerender.

You can observe the difference when operating the sub menu under the App menu. Here things work as expected and no rerender is triggered, even tho the whole page is replaced.

If the v-app-bar is moved into the pageshell and therefore is not replaced on client side routing the flicker disappears.

Repro: https://github.com/IT4Change/boilerplate-frontend/tree/9ea29c9455ef2940249e5f991ad63b668a1cacc3 Workaround fix: https://github.com/IT4Change/boilerplate-frontend/commit/2b162f84825ba78875a882f2716c15c86a22b4e9

You can see the behaviour by opening the Inspector and open up an element deep in the DOM tree. When operating the v-app-bar menu you will see the DOM tree collapses to the top elements and you have to reselect your element. If you operate the sub menu under app this behaviour does not occur.

Now the guesswork: For some reason the browser seems unable to detect that the v-app-bar is the same as before - therefore it considers it a new element and fully rerenders it. This might be due to css properties or other transformations occurring during runtime.

Expected Behavior

No rerender is triggered when operating the v-app-bar with client side rendering.

Actual Behavior

A rerender is triggered when operating the v-app-bar with client side rendering.

The image flicker (black box of image) occuring when operating the v-app-barmenu (Daheim, Anwendung, Über):

The sub menu (Wert, Erhöhe, Zurücksetzen) working without flicker and the actual image visible:

Reproduction Link

https://github.com/IT4Change/boilerplate-frontend/tree/9ea29c9455ef2940249e5f991ad63b668a1cacc3

[ulfgebhardt]

Possible duplicate is https://github.com/vuetifyjs/vuetify/issues/15880 and https://github.com/vuetifyjs/vuetify/issues/15202 but all provided fixes do not solve the issue. Furthermore its marked as solved and the above described problem occurs in the latest version of vuetify. Just adding this for context.