[🐞] carousels override vertical scroll of parent element on touch

[patrickkmatias]

Which package is affected?

Headless Kit

Describe the bug

I have container (<ul>) that have many carousels inside of it.

The problem is: when you try to scroll down the parent element touching it, nothing happens. If you try to scroll using the mousewheel, it works fine.

What probably is happening is that the children carousels are capturing the touch action from the parent.

I tried using touch-action property from CSS to solve but it didn't work, but I believe that it would be the right way to solve it...

There's a video where I showcase the problem, and that I solve it when using pointer-events: none on the children in the parent (<ul>) element, but then I break the carousels as I can't slide/click then anymore.

Reproduction

not-scrollable-carousels-parent.mp4

Steps to reproduce

insert many carousels inside an element with constrained height, causing it to overflow.

this will cause the parent element to not be scrollable on mobile devices (using touches).

System Info

System:
    OS: Windows 11 10.0.26100
    CPU: (12) x64 AMD Ryzen 5 5500U with Radeon Graphics
    Memory: 2.32 GB / 7.35 GB
  Binaries:
    Node: 22.12.0 - C:\Program Files\nodejs\node.EXE
    npm: 10.9.0 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Edge: Chromium (131.0.2903.99)
  npmPackages:
    @builder.io/qwik: ^1.9.0 => 1.9.0 
    @builder.io/qwik-city: ^1.9.0 => 1.9.0 
    @qwik-ui/headless: ^0.6.3 => 0.6.3 
    typescript: 5.4.5 => 5.4.5 
    undici: * => 6.19.8 
    vite: ^5.4.11 => 5.4.11

Additional Information

I couldn't reproduce on Stackblitz as it opens a repo using styled QwikUI, and carousels only exist on headless QwikUI...

Doing the equivalent using SwiperJS behaves as expected: the parent element is scrollable using touch, and also its children with carousels

[thejackshelton]

This should be fixed in 0.6.4, feel free to open a new issue if that's not the case!