[Bug Report][3.3.4] Elements that overflow are covered by those under them, even ignoring z-index

[scscgit]

Environment

Vuetify Version: 3.3.4
Last working version: 2.5.7
Vue Version: 3.3.4
Browsers: Opera, Google Chrome, Mozilla Firefox
OS: Windows 10

Steps to reproduce

Create <v-card style="overflow: initial">, place an element inside and make it overflow, for example by style="transform: scale(7).

Expected Behavior

Element covers anything outside the container, especially when using higher z-index.

Actual Behavior

z-index is also ignored - in general, it works way worse compared to Vuetify 2, and the rules behind how some components sometimes have increased z-index seem too arbitrary.

Reproduction Link

https://play.vuetifyjs.com/#...

Other comments

• overflow: initial on v-card as recommended in [Bug Report][3.3.3] VOverlay contained is cropped if content is larger than container #17593 causes the same behavior as Vuetify 2, where this worked flawlessly.

• On .v-system-bar I use z-index: 0 !important; to address this issue, as mentioned in [Bug Report][3.3.3] VSystemBar forcibly displays at the top of a page and covers content #17580. Do we have to use this workaround everywhere?

• ✨ When using max-height, the width is supposed to reduce, but in old browser (reproduced in Firefox 106), the image gets cut instead, keeping full width. The old Vuetify 2 version behaved as supposed even in old browser, so why does an element as simple as v-img need a breaking change? Is there no way to make it backwards compatible?
  

• ✨ There is also a strange behavior of stacking order of v-snackbar - when I enable more of them, one unexpectedly gets a style="z-index: 2010; " (instead of 2000), causing their order to change. I wasn't able to reproduce a minimal example for this, but it always happens in my project. In any case, this side-effect is too arbitrary and seems to be introduced to VOverlay in #05290fe3. It requires a workaround of

  <style lang="scss">
  .v-snackbar--active {
    // Hotfix to prevent some snackbar displaying in incorrect order (with 2010)
    z-index: 2000 !important;
  }
  </style>

• In general, z-index override used by libraries doesn't seem to have effect (for example, fullscreen mode of Trumbowyg).

[KaelWD]

VCard also has z-index:0 for shadows and background images

the image gets cut instead

Seems like a firefox bug with grid, height works as expected

There is also a strange behavior of stacking order of v-snackbar

Intentional, the most recently opened one is on top

In general, z-index override used by libraries doesn't seem to have effect

Yeah you'll get that if it's in another element that creates a stacking context, that's exactly why stuff like teleport exists.

[scscgit]

VCard also has z-index:0 for shadows and background images

I'd expect that we can at least set z-index: 0 on v-card itself, but I can't get it to work.

Seems like a firefox bug with grid, height works as expected

Yeah, sadly height isn't sufficient for my use-case. I'm mostly curious as to what "new CSS feature" had been used, as it's not intuitive how a feature as simple/old as this can possibly cause a breaking change.

Intentional, the most recently opened one is on top

It really doesn't work though, I wasn't able to reproduce a deterministic behavior. In any case, I illustrate a use-case of defining a set of multiple snackbar types with priority, as in v-for="snackbar in ['warning', 'alert']".

Yeah you'll get that if it's in another element that creates a stacking context, that's exactly why stuff like teleport exists.

Does Vuetify 3 now create stacking contexts that intentionally cannot be overridden by any library? I wonder what kinds of workaround steps could be documented for beginners.

[KaelWD]

I'd expect that we can at least set z-index: 0 on v-card

It already has it

what "new CSS feature" has been used

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_grid_layout
I think I'll have to revert that anyway though: #17413

I wasn't able to reproduce a deterministic behavior

An example of this would help. It reuses the same code as dialogs and menus so it should be fine

multiple snackbar types with priority

Typically you would have a single snackbar component and switch between them with a script, might be some ideas for you in #2384

intentionally cannot be overridden

No, it's just a consequence of CSS that's needed for other reasons

[scscgit]

I'd expect that we can at least set z-index: 0 on v-card

well it gets covered by z-index: 99

I wasn't able to reproduce a deterministic behavior

Sadly, I'm only able to debug it in the inspector as part of the entire project (where I see that one VOverlay gets 2010 and keeps it even after the snackbar is closed/reopened). I was only able to reproduce the behavior I wanted:

• https://play.vuetifyjs.com/#...

where this issue doesn't appear, i.e. the priority works as I'd need it to.

• (In general, I don't agree with Material Design on only displaying one snackbar, and I can't afford to display a non-dismissible error before a dismissible status update.) At the moment I'm only upgrading Vuetify 2 project 1:1, but I'm certainly voting for an official support of snackbar queues :)

[KaelWD]

well it gets covered by z-index: 99

The existing z-index: 0 creates a new stacking context

[scscgit]

@KaelWD what is the workaround then? How can we make it work like it did in Vuetify 2? I believe that higher z-index values should be able to override lower ones.

[scscgit]

I found a workaround: it gets fixed once I add z-index: initial to BOTH parent v-cards' styles.

• https://play.vuetifyjs.com/#...