Carousel Sliding image disappear when you move the mouse while the slide effect happen

[AmilaDotDev]

Found this bug while trying to use carousel for my website.

To reproduce this issue please follow these steps.

• have a carousel with few images with slide effect.
• let it slide the images left
• at the instance where the slide effect happen, hover over the carousel
• you will see the image which slid off from the view disappear from left leaving the background color visible

this might be due to something in the css which gets applied to the carousal when mouse hover over or with the pause event.

Thanks

[cvrebert]

What browser and OS, and versions thereof?

[AmilaDotDev]

I'm using Chrome v 24.0.1312.57 on windows, and I just tried this on chrome 24, Firefox 18 and Safari 6.02 on mac os x as well and it does the same. The above screenshot was taken from twitter bootstrap github page

[sompylasar]

This issue was actually reported before in #6135 but it was ignored and closed without investigation (there even was a video that displays the glitch).

I've hit that glitch myself and made a deeper inspection.

Having pause option set to 'hover' (the default value), the carousel binds its pause method to the 'mouseenter' event, and the root of the glitch lingers there.

On pause, the active classname from the item that slides away gets removed, so the item immediately inherits display: none; from the item classname. But the left CSS property is still being transitioned to its new value, and that is what we see: the active item disappears before the next item transition ends.

Let's analyze the code (read my comments):

        cycle: function (e) {
            if (!e) this.paused = false
            this.options.interval
                && !this.paused
            && (this.interval = setInterval($.proxy(this.next, this), this.options.interval))
            return this
        }

        , pause: function (e) {
            // Why the paused flag is not set when an event is being handled?
            // The only use of this line is handling the 'mouseenter' event.
            if (!e) this.paused = true
            if (this.$element.find('.next, .prev').length && $.support.transition.end) {
                // The transition end handler is being called, 
                // but actually the transition does not stop here,
                // and the 'trigger' will only call the corresponding handler.
                // Continue reading to the handler code below...
                this.$element.trigger($.support.transition.end)
                // BTW, I could not understand why the following call is here...it evaluates to:
                // 1. The 'paused' flag set to false ("if (!e) ").
                // 2. The 'interval' assigned but immediately cleared later.
                // So the only purpose is to set 'paused' to false within the 'pause' method?
                // Looks very confusing.
                this.cycle()
            }
            clearInterval(this.interval)
            this.interval = null
            return this
        }

        , slide: function (type, next) {
                // ...
                this.$element.one($.support.transition.end, function () {
                    // The transition of the next item may have not been finished by now 
                    // because of the trigger call in the 'pause' method.
                    $next.removeClass([type, direction].join(' ')).addClass('active')
                    // The active item that is partially gone loses its 'display: block;' style and 
                    // immediately gets 'display: none;' regardless of the transition state.
                    // This results in the described missing item before the end of animation.
                    $active.removeClass(['active', direction].join(' '))
                    that.sliding = false
                    setTimeout(function () { that.$element.trigger('slid') }, 0)
                })
                // ...

I could only solve the issue by patching the pause method:

• removed (commented out) the paused flag check for the event object existence to set and reset the paused flag anyway (please tell me the difference between pausing from a user event and from an API call - I could not understand).
• removed (commented out) the lines that trigger the transition end handler and cycle (the transition ends normally but the next cycle is not started because the paused flag is set);

There should be a more logical way of solving this nasty glitch but may require refactoring. Please, do not ignore and investigate. Thanks in advance.

[fat]

can't reproduce this on bootstrap 3… can you?

[fat]

ah - nevermind got it – ok i'll see what i can do. thanks!

[fat]

fixed in 3.0