When using bootstrap's row and column classes within the swiper-slide class, elements within are not clickable on the 3rd slide! Only happens with effect cube.

[lpapazow]

Check that this is really a bug

• [x] I confirm

Reproduction link

https://codesandbox.io/s/swiper-effect-cube-forked-tf46z

Bug description

I have bootstrap imported in my project and I have the following 3 divs nested and an input element within:

        <div class="swiper-slide">
            <div class="row">
                <div class ="col">
                   <input type="radio">

I have three slides each containing the same code and the radion type input is perfectly clickable on slides 1 and 2. However, strangely, it is not clickable on slide 3. What's even stranger is that the problem is only present when using the cube effect. If I change the effect to flip or something else, the bug disappears.

This happens with many different versions of swiper-js and different versions of Chrome and Safari browsers.

Expected Behavior

The input elements to be always clickable on every slide.

Actual Behavior

When using bootstrap's row and column classes within the swiper-slide class, elements within are not clickable on the 3rd slide. Only happens with effect cube.

Swiper version

7.3.1

Platform/Target and Browser Versions

Chrome 96.0.4664.45 (Official Build) (64-bit)

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?

• [X] I'm willing to open a PR

[github-actions[bot]]

Hello @lpapazow. Please provide a online reproduction by codesandbox or a minimal GitHub repository. You can fork one of our demos in codesandbox to get start. Issues labeled by missing demo will be closed if no activities in 3 days.

[lpapazow]

@nolimits4web I added the demo in codesandbox. For some reason the drag cursor only appears after I refresh the internal browser. Please tag me if there's something else I need to do, I am not very familliar with the processes but I am a big fan of the library from what I've seen so far.

[immakdas]

have the same bug with 3rd slide in the Chrome 98 and all slides in Safari 15.2 swiperjs 7.4.1

[gavin310]

Not sure if it's related, but I was having issues with Swiper 7.4.1 in Chrome 98 and Safari with links not being clickable when using the fade effect. Upgrading to Swiper 8.0.3 or downgrading to 7.1.0 (chosen arbitrarily) fixed the issue.

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[immakdas]

issue not stale. with swiper 8.4.0 links are not clickable on the 3rd slide in Chrome and in first slide in Safari 16

[georgeiliadis91]

This issue is still happening. To give a little more context, it happens on every 3rd and 4th slide.

[nolimits4web]

Issue is closed because of outdated/irrelevant/not actual/needed more information/inactivity.

If this issue is still actual and reproducible for latest version of Swiper, please create new issue and fill the issue template correctly:

• Clearly describe the issue including steps to reproduce when it is a bug.
• Make sure you fill in the earliest version that you know has the issue.
• Provide live link or JSFiddle/Codepen or website with issue