Carousel slide animation bounces slightly on completion [iOS9/Safari]

[henwen]

This is new behavior on Alpha 6 –

On completion of the slide animation, the carousel-item content has a small horizontal bounce on the left edge of the carousel. It's a bit hard to see in the gif below, so visit the docs on an iOS device if you have one for a clearer example.

This behavior is only on iOS9 Safari (as far I know) and is likely related to whatever's causing issues #21749 and #21750.

[edoparearyee]

I had this issue as well. I think this is probably down to the below:

If the browser doesn't support transition events then the javascript logic for this component uses a setTimeout function call which is hard coded to a fixed duration. See here: https://github.com/twbs/bootstrap/blob/v4-dev/js/src/carousel.js#L26 and https://github.com/twbs/bootstrap/blob/v4-dev/js/src/carousel.js#L383. Even if this matches the css transition duration for the carousel slide it appears that the setTimeout callback is being triggered before the transition is complete, remove the classes used during the transition and causing the "bounce".

Setting $carousel-transition: transform .5s ease-in-out; (so decreasing the transition duration by .1s) provides a workaround for this particular case but is not an ideal solution I think.

[Johann-S]

Same behaviour on Edge

[mdo]

Dupe of #21685.