Bootstrap: carousel is sliding on ios when clicking whitout controls

[MarjolaineLB]

Hi there,

I've an issue I can't understand using the bootstrap carousel.
On mobile, I want to slide by swiping (and not clicking), and, on click, a pinterest button appears.
I've desactivated the carousel control buttons on mobile device (see css code below) and have a jquery rule to the pinterest button,
It works perfectly on android. But on ios, on click, the carousel is sliding.

Any idea ?

My code

<div id="carouselwork" class="carousel slide work-single" data-ride="carousel" data-interval="false">
                    <div class="carousel-inner">
                        <div class="carousel-item  active">
                             <img src="..." alt="..." />
                             <div class="social-sharing ss-social-sharing" >
                   <a onclick="return ss_plugin_loadpopup_js(this);" rel="external nofollow" class="ss-button-pinterest" href="..." target="_blank"></a>
                             </div>
                             <div class="img-work-caract">
                                 <p>the title</p>
                                 <div class="counter">1/<span class="total">2</span>
                                 </div>
                            </div>
                        </div>
                        <div class="carousel-item">
                            <img src="..." alt="..." />
                             <div class="social-sharing ss-social-sharing" >
                  <a onclick="return ss_plugin_loadpopup_js(this);" rel="external nofollow" class="ss-button-pinterest" href="..." target="_blank"></a>
                             </div>
                             <div class="img-work-caract">
                                 <p>the title</p>
                                 <div class="counter">2/<span class="total">2</span>
                                 </div>
                            </div>
                        </div>
                    </div>
                    <a class="carousel-control-prev carousel-control" href="#carouselwork" role="button" data-slide="prev"></a>
                    <a class="carousel-control-next carousel-control" href="#carouselwork" role="button" data-slide="next"></a>
                </div>

and css

@media (max-width: 768px) {
        .social-sharing.visible {
            display: block;
        }
        .carousel-control {
            display: none;
        }
    }

and jquery :

$('.carousel-item img').click(function() {
     $('.social-sharing').toggleClass('visible'); });
$("#carouselwork").on('slide.bs.carousel', function () {
       $('.social-sharing').removeClass('visible');
 });

Thanks !

[Johann-S]

Sorry, but we cannot help with how-to or general troubleshooting issues here; only bug reports and feature requests. You'll want to ask around in the official Slack team or Stack Overflow. See our readme for more details.
Thanks for using Bootstrap.

[happy-dev]

@Johann-S : I understand your reaction but don't you consider having different behaviour on different OS a bug ?

It seems that on Android, Bootstrap slides on swipe while on iOS, it swipes on click.
Feels like a bug to me, don't you think ?

[Johann-S]

Hi @happy-dev, I tested on iOS 11 and 12 with Safari and everything works, the carousel slides on swipe

[patrickhlauke]

what @happy-dev means is that on iOS, when you just tap on the carousel, it also slides, which i can confirm. i'd hazard a guess that it's because a clean tap still generates one sacrificial touchmove event, which our curstom sliding script may be picking up. on android, it likely follows the pointer events path (from memory, we implemented that, right? not checked in a while) where this doesn't happen.

[MarjolaineLB]

Yes it slides on swipe. But it also slides on click, wich it should not, i think...

[Johann-S]

Yep on Android we use PointerEvents and on iOS TouchEvents, ok so I'll reopen the issue

[happy-dev]

Thank you @patrickhlauke and @Johann-S.
We will follow the activity here.

We can help with the testing if needed.

[Johann-S]

@patrickhlauke I tried to fix that issue, but I'm unable to reproduce it... I tried to do a simple tap on iOS 12, 11 and 10 with Safari and nothing happens, no slide

[MarjolaineLB]

@Johann-S have you carousel-controles on diplay:none when you try ?

[Johann-S]

@MarjolaineLB I checked on this carousel: https://getbootstrap.com/docs/4.3/components/carousel/#with-indicators

[MarjolaineLB]

@Johann-S it seems that the bug appears after sliding by swipe. Have you try to swipe then to click ?

[Johann-S]

Oh ok ! Saw it ! Thanks @MarjolaineLB 👍

[Johann-S]

I made a PR which fix that: https://github.com/twbs/bootstrap/pull/28558
And you can test it here: https://deploy-preview-28558--twbs-bootstrap.netlify.com/docs/4.3/components/carousel/#with-indicators

[MarjolaineLB]

Hi ! Thanks for the work. Is there any chance to have the fix in the minified version bootstrap.min.js ?

[XhmikosR]

It will be in the next 4.x release and v5 when this happens. There's no ETA at the moment.

[magicmb]

It will be in the next 4.x release and v5 when this happens. There's no ETA at the moment.

We are also waiting for the next bootstrap.min.js to be released as we are running TBS from CDN and this click swipe issue has been bugging us for a while now.

Is there any official page we can check for upcoming release dates?

Also I'm not sure this is the right place for my other question, but it would be good to know if there's an easy way of running the current bootstrap.min.js 4.3.1 from CDN and to implement the carousel.js fix inside the website page that requires it?

Happy to ask on StackOverflow, but if any Docs exist on how to go about implement such intermittent patch/workaround while waiting for fixes to come out in the next release it would be good to know, especially since TBS releases only seem to come around once in a while.