jQuery offset top doesn't work correctly

javascript, jquery, offset, raphael

Solution

The jQuery `.offset()` function has this limitation:

Note: jQuery does not support getting the offset coordinates of hidden elements or accounting for borders, margins, or padding set on the body element.

The body in this case has a 10px top border, which is why your drawing is off by 10 pixels.

Recommended solution:

var offset = $("#input").offset();
x = x - offset.left - $(document.body).css( "border-left" );
y = y - offset.top + $(document.body).css( "border-top" );

Problem

I'm trying to create an script draw something in an element by mouse and I'm using `Raphaeljs` to do that. For correct drawing I need to find `top` and `left` of ‍`input‍‍` element. I'm using `var offset = $("#input").offset();` to get `left` and `top`. But the `top` value isn't correct. It's `10px` lower than ‍‍the real `top` distance. I think the `10px` maybe change in different resolutions then I can't add `10px` to it normally then I want to know how can I fix the problem! I uploaded my test here.

Original source