Tooltip Hidden Behind Parent Element Due to Stacking Context with Transform & Z-index

[mustafaBagwala]

Describe the bug

In our Vue application, we have a tooltip that is intended to appear on top of parent element (vue-recycle-scroller__item-view) when hovered over. However, the tooltip is being hidden behind the parent element (vue-recycle-scroller__item-view). This issue seems to be due to the parent element having a dynamic transform property, which creates a new stacking context, and the tooltip having a higher z-index.

Reproduction

System Info

System:
    OS: Windows 11 10.0.22621
    CPU: (8) x64 11th Gen Intel(R) Core(TM) i7-1185G7 @ 3.00GHz
    Memory: 8.56 GB / 31.69 GB
  Binaries:
    Node: 18.10.0 - C:\Program Files\nodejs\node.EXE
    Yarn: 1.22.19 - ~\AppData\Roaming\npm\yarn.CMD
    npm: 8.19.2 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Edge: Chromium (123.0.2420.97)
    Internet Explorer: 11.0.22621.3527
  npmPackages:
    vue: ^2.6.12 => 2.7.16
    vue-virtual-scroller: ^1.1.2 => 1.1.2

Used Package Manager

npm

Validations

• Read the docs.
• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• Check that this is a concrete bug. For Q&A open a GitHub Discussion.
• The provided reproduction is a minimal reproducible example of the bug.

[mustafaBagwala]

@Akryum Could you please have a look at it ?

[mustafaBagwala]

@Akryum Could you please patch disableTransform property into vue2 please ?