Swiper Wrapper is on top of swiper slide and covering a tag link (Happens in Coverflow Effect)

[kazemsami]

Check that this is really a bug

• [X] I confirm

Reproduction link

https://codesandbox.io/p/devbox/swiper-react-effect-coverflow-forked-m4qfl2

Bug description

When I use the coverflow effect and set loop true, for some reason the swiper wrapper goes on top of some of the swiper slides and covers the link on each slide. In the demo I linked try to move to the previous slide and hover around the whole slide you will notice that the pointer changes to default and the link is not clickable anymore when hovering over the left side of the slide. I tried changing the z index on the swiper slides but that did not work. Is this a bug or am I missing something?

Expected Behavior

For all the links inside the swiper slide to be clickable when using coverflow effect

Actual Behavior

The links inside the swiper slide are not clickable.

Swiper version

11.1.1

Platform/Target and Browser Versions

macOS, Firefox Developer Edition

Validations

• [X] Follow our Code of Conduct
• [X] Read the docs.
• [X] Check that there isn't already an issue that request the same feature to avoid creating a duplicate.
• [X] Make sure this is a Swiper issue and not a framework-specific issue

Would you like to open a PR for this bug?

• [ ] I'm willing to open a PR

[LeoniePeters]

I encountered the same issue in a different setup using Swiper in a Vue application and having not set the loop parameter. Firefox seems to interpret transformed elements and z-indexes on those elements and the parent element differently. Which make this pretty hard to fix.

A workaround is to set .swiper-wrapper { width: 0; height: 0; } and a fixed height on the parent .swiper element.