Strange hover behavior in Internet Explorer 10

Strange hover behavior in Internet Explorer 10

I have a strange problem. The error occurs in IE10 and IE9. 
Here is the code responsible for the hover behavior: 
  
    
   
  1. var postId = jQuery(elem).attr('id');
    2. 
   
  2. var articleId = '#'+postId;
    3. 
   
  3. var article = jQuery(articleId);
    4. 
   
  4. article.hover(
    5. 
   
  5.       function(event) {
    6. 
   
  6.             console.log('enter');
    7. 
   
  7.             jQuery(me.elem).append(jQuery(this));
    8. 
   
  8.             TweenMax.to(this, 0.3, {scaleX: 1.07, scaleY: 1.07, boxShadow: "5px 10px 10px "+color});
    9. 
   
  9.       },
    10. 
   
  10.       function(event){
    11. 
   
  11.             console.log('leave');
    12. 
   
  12.             TweenMax.to(this, 0.3, {scaleX: 1, scaleY: 1, boxShadow: "0px 0px"});
    13. 
   
  13.       }
    14. 
   
  14. );
    15.

I'm not able to reproduce it in jsfiddle. I think it has something to do with the jQuery.masonry positioning the <article> elements with position: absolute; 

I'll post the link to the project:


the main js responsible is:


I can't catch a mouseout nor mouseleave event on the <article> elements. 

I've tried the fixes:
  1. adding background-color.
  2. &nbsp or trying to provide some other innerHTML.
  3. tried it with jQuer1.9 and jQuery2.0

Non of them work. Any help or ideas would be a great!

cheers!