Question

I have some lightbox-style pop-up coded in jQuery. It works in every decent browser, except IE9 (if considered a decent browser). It works fine if you click it: the pop-up opens, nothing unusual. However, as soon as you move your cursor, everything starts flickering, disappearing or whatever IE9 is capable of doing to destroy functionality.

I have no idea how this happens (also because it doesn’t happen in IE8). I’ve given all elements I’m using proper positions and z-indexes. The problem is not the black screen overlay (which is just a div with a transparent background, z-index well below the centered content), I tested that already by completely removing that element from the code.

Here’s the code I use to hide/show the div:

    //open popup
$(".pop").click(function(){
    $refselector = "." + $(this).attr("rel")
    $($refselector).fadeIn(500);
    $(".ui-overlay").fadeIn(50);
positionPopup();
});  

//close popup
$(".close").click(function(){
    $(".overlay-form").fadeOut(500);
    $(".ui-overlay").fadeOut(500);
});

//close popup by clicking outside the box
$(".ui-overlay").click(function(){
    $(".overlay-form").fadeOut(500);
    $(".ui-overlay").fadeOut(500);
});

If you want to see it in action: http://www.puurtrainingen.nl/referenties and click any of the four boxes.

If anyone ever encountered problems like this and knows the solution: your help is appreciated!

Thanks in advance

Answer 1

.page-item‘s overflow: hidden caused the problem.

You can either change the CSS rules for .page-item or move .overflay-form to another container.