Bootstrap: Double increase carousel interval after click 4.4.1

[RvRedd]

After manually switching carousel slide interval increases by 1.5-2 times on mobile safari.
Just check for yourself on your manual page — https://getbootstrap.com/docs/4.0/components/carousel/#with-captions
For me, this is a critical problem: I wanted to make carousel like a stories page (instagram / facebook) but the interval is out of sync with the story indicator

[XhmikosR]

That's a pretty old version. The latest one v4.4.1 https://getbootstrap.com/docs/4.4/components/carousel/#with-captions

[RvRedd]

Showed the wrong page. I use the latest version on the project.
You didn’t even try it yourself. I will tell in more detail:
Try on an mobile safari scroll forward 5-8 times and calculate how much the interval will be. Usually from 5 seconds it becomes 8-11.

[XhmikosR]

I don't have such a browser to try and yes, you linked an old version without filling up the needed info.

[XhmikosR]

So,
as per our guidelines, I need at least the browser/OS versions.

[RvRedd]

https://www.youtube.com/watch?v=DWUx8E_Lmxk
iOS 13.3.1 iPhone 7 plus
Chrome 80.0.3987.95
Safari 13

[XhmikosR]

Alright, I reproduced it on BrowserStack. It also happens on master branch (https://twbs-bootstrap.netlify.com/docs/4.3/components/carousel/#with-captions) and seems to happen on >= 4.0. v3.4.1 doesn't seem to have the issue.

Now, why this happens is a mystery to me...

/CC @Johann-S

[XhmikosR]

v4.0.0-alpha6 doesn't have the issue either. So it must be something in https://github.com/twbs/bootstrap/compare/v4.0.0-alpha.6...v4.0.0#diff-c176963d34a5956a70f8be7623e90a50

[patrickhlauke]

likely due to the hover-type behavior for touch devices - so that once a user interacts with a carousel, it pauses cycling for twice the duration (so the user gets a chance to actually read/interact with it), similar to what happens with mouse hover https://github.com/twbs/bootstrap/commit/6ae5fb12e6c996a6526250e8cb703b007e4213fc#diff-c176963d34a5956a70f8be7623e90a50

[patrickhlauke]

(ah, i see that's the same change @XhmikosR pointed to)

[patrickhlauke]

so, as documented in https://getbootstrap.com/docs/4.4/components/carousel/#options when pause is set to hover

If set to "hover", pauses the cycling of the carousel on mouseenter and resumes the cycling of the carousel on mouseleave. If set to false, hovering over the carousel won't pause it.

On touch-enabled devices, when set to "hover", cycling will pause on touchend (once the user finished interacting with the carousel) for two intervals, before automatically resuming. Note that this is in addition to the above mouse behavior.

[morrissey-ingenious]

@RvRedd - assuming you are playing video content in your carousel you shouldn't be using set intervals on the carousel slide itself but instead you should be listening for the video end and then calling .carousel('next'). using a listener will provide the correct functionality across all devices especially if videos are buffering etc, etc.