You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
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.
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:
Possible duplicate is #15880 and #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.
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: IT4Change/boilerplate-frontend@2b162f8
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-bar
menu (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
The text was updated successfully, but these errors were encountered: