Question

This can be easily repeated on the official examples here: http://www.jacklmoore.com/colorbox/example1/

Open the first example, and then try to scroll the page “hard” up or down 4-5 times in a row. The colorbox may shift a little. Then, try to close the colorbox. Touching anywhere outside the colorbox or touching the close button appears to do nothing. I even tried manually adding a manual $.colorbox.close() call and an alert to the close button touch event. The alert shows up (twice actually), but the Colorbox doesn’t close. There is absolutely no way to close it. It seems like this action somehow fundamentally breaks something.

It works fine if you play nice and just touch outside of the Colorbox or touch the close button, but if you do any “rough scrolling,” then it appears to completely break it somehow.

So, I have a few questions.
1. Can anyone else replicate this? (or am I doing something horribly wrong?)
2. Has anyone run into this before?
3. If so, are there any workarounds?

Answer 1

Edit: This bug has been fixed in jQuery 1.8.3.

If you are using jQuery 1.8.2 then the following patch will resolve the issue.

--- jquery-1.8.2.js (original)
+++ jquery-1.8.2.js (fixed)
@@ -8615,6 +8615,9 @@
            delete tick.elem;
        }),
        tick = function() {
+           setTimeout(function() {
+               fxNow = undefined;
+           }, 0 );
            var currentTime = fxNow || createFxNow(),
                remaining = Math.max( 0, animation.startTime + animation.duration - currentTime ),
                percent = 1 - ( remaining / animation.duration || 0 ),

If you are using jQuery 1.7.1 then the following patch will work instead.

--- jquery-1.7.1.js (original)
+++ jquery-1.7.1.js (fixed)
@@ -8706,6 +8706,7 @@

    // Each step of an animation
    step: function( gotoEnd ) {
+       setTimeout( clearFxNow, 0 );
        var p, n, complete,
            t = fxNow || createFxNow(),
            done = true,

I’ve submited more information on this bug to jQuery in ticket #12837.