title: Position of mouse and element width differs in IE and Chrome (jQuery)
body: <p>I am trying to detect if mouse is hovering over some element with Javascript by using mouse coordinates and element position (note that I'm not able to use hover event). For that I use this function:</p>
  
  <pre><code>var rect = $('.rectangle'),
      rectLeft = rect.offset().left,
      rectTop  = rect.offset().top,
      rectRight = rect.offset().left + rect.width(),
      rectBottom = rect.offset().top + rect.height();
  
  
  if (rectLeft &lt; e.pageX
      &amp;&amp; rectRight &gt; e.pageX
      &amp;&amp; rectTop &lt; e.pageY
      &amp;&amp; rectBottom &gt; e.pageY) {
      // in
  }
  else {
      // out
  }
  </code></pre>
  
  <p>While it works flawlessly in Chrome, I have some issues in IE11 (didn't try lower versions), where detection is not exact - the right border of element and pageX position of mouse differs. You can see the behavior in this snippet: </p>
  
  <p><a href="http://codepen.io/Jarino/pen/qdywGv" rel="nofollow noreferrer">http://codepen.io/Jarino/pen/qdywGv</a></p>
  
  <p>When you go with the mouse into the area from right border, the area doesn't turn green immediatley, but after some more pixels.</p>
  
  <p>Thanks for any advice.</p>
  
  <p><strong>EDIT</strong></p>
  
  <p>This seems to be the problem specific to only my machine, which it's pretty weird. I tried this on another company computer and it works, also as <a href="https://stackoverflow.com/users/1307641/infira">Infira</a> commented, it works on his enviroment too.</p>