What is --v-layout-top and why is it randomly fucking up my layout?

[frederikheld]

Issue: when navigating between views, part of the layout moves up and down. This is visible because it's an animated transition. Everything would look fine if it would just snap into place, but it is animated, which makes it - horrible UX I'd say?

So the culprit seems to be --v-layout-top which is applied to <main> and which changes from --v-layout-top: 256px; to --v-layout-top: 192px; when navigating from one view to the other.

I do not set this variable, it seems to be part of the v-app magic of Vuetify or something else behind the scenes.

What is this? How can I fix my issue?

Any help appreciated!

[KaelWD]

It reserves space for fixed position elements like toolbars and banners, do you have 256px worth of toolbar?
It won't animate if there's a different VMain instance on each page instead of one in App.vue.

[frederikheld]

Thanks for your reply!

do you have 256px worth of toolbar

Well, that's a delicate question. Yes and no.

I don't use one global app bar in App.vue but a separate app bar in each view, because my app bars have very different content on each view.

I also use keepalive on my main views. Which are 4, which apparently makes 4 * 64px = 256px. I don't know if this is by design or a bug. What's weird though is that on two of those four views, it only seems to add up to 192px, which causes the layout glitch. I can't see any difference in the way I style those app bars which might make the difference.

But you correctly assumed that my v-main is in App.vue. I'll move it to the views and see if it helps.

[frederikheld]

One more question before I re-write the v-main part of my app: Is v-main necessary? And will it allow me to move content below the transparent app bar? I suspect that for my use case it might be better to compensate for app bar and bottom nav manually because in some views content needs to be below the app bar and I have to compensate for the notch on Android & iOS manually anyways .... Does v-main have any other purpose than doing the size compensation magic?

[frederikheld]

Getting rid of v-main entirely fixed my issue. The magic it applies works well for basic layouts that are implemented in Vue/Vuetify only, but as soon as you try complex stuff and have to deal with safe-area-inset CSS variables, it is easier to set the values manually as needed.