JQuery Offset 함수 문제

JQuery는 쓰면 쓸수록 유용하고 편하다고 느낀다. 그중에 .offset() 함수가 있다.

 

offset()

.offset()


offset( coordinates  )

.offset( coordinates )
.offset( function(index, coords) )

Document : http://api.jquery.com/offset/

이중 Offset으로 좌표를 지정해줄 수가 있는데, 현재 좌표를 기준으로 좌표를 변경하던 중에 문제가 발생했다.
FF에선 이상이 없었는데, IE와 Chrome에서만 문제가 생기는 거다..
바로 
 
 

var offset = $(".login").offset();


$(".login").offset({top: offset.top+3, left :  offset.left-285}); 

var offset = $(".login").offset();


offset.top = offset.top+3;
offset.left = offset.left-285;

$(".login").offset(offset); 

이런 방식으로 좌표를 지정해 줄 수가 있는데, (이 두가지 방식은 동일한 결과를 낸다)

파이어폭스에선 이상이 없으나, IE, Chrome에선 0,0 좌표 기준으로 +- 된 값만 반영이 된 좌표가 나오는 것이다.
저기서 eval로 좌표값을 묶어주거나, 직접 숫자값을 줘도 동일하다. (javascript의 Number, String 인식문제가 아니란 것)

해결법을 고민하던 중에 발견하였다.
바로, offset을 설정해주는 함수를 두번 실행하면 된다.

즉, 마지막에서
$(".login").offset({top: offset.top+3, left : offset.left-285}); 
 or
 $(".login").offset(offset); 
를 두번 실행해주면 되는 것이다.

이유는? JQuery에서 파싱 등의 문제로 생긴 버그인 듯하다.