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.

Check that this is really a bug

• 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

• Follow our Code of Conduct
• Read the docs.
• Check that there isn’t already an issue that request the same feature to avoid creating a duplicate.
• 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

[immakdas]

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

[georgeiliadis91]

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