Question

I’m stuck.
Yet 12h I’m trying to debug a weird problem. Thanks to IE7, IE8.

Here is a demo:

DEMO

To get the issue, just look at the CSS and set the #container to relative; marg. 0 auto (That’s what I need! ) Than hover #container and you’ll see: mouseover = stops other .el animations!

I need here to have the mouseover event over the page (or #container) for the div #mouse to follow the pointer. And the div #container to be page-centered (not 100% width). The problem seemed so simple but it’s weird!

1. when the div #mouse is not appended to the pointer – WORKS GREAT.
2. when less than 10 floating .el – GOOD. (bot not my solution, I need even up to 100+ .el.)
3. when #container is CSS set to absolute (when the container has 0px left/top) – GREAT!

But I need it centered.

Please please help!

EDITED:
And yes, when the #container is set to relative ; 0 auto, and the window width is smaller than #container than the issue is gone! … any ideas?

Answer 1

I don’t know why this is happening, and I haven’t tried to debug it particularly deeply.

I did find a somewhat crazy fix:

$("#container").mousemove(function(e){
    setTimeout(function(){       
        $('#mouse').css({top: e.clientY -12 , left: e.clientX +50});
    },0);
});

See: http://jsfiddle.net/tDXdz/4/ – fullscreen: http://jsfiddle.net/tDXdz/4/show/

You should probably use this fix for IE7/8 only, because it might reduce performance in other browsers, and they don’t need the fix. Test it.