Incorrect positioning on iPads (iPhone OS 3.2)

[GoogleCodeExporter]

What steps will reproduce the problem?

Click on a calendar pop-up icon

What is the expected output? What do you see instead?

The calendar appears at the specified position (usually right at or beside the 
icon).
The calendar appears at the specified position with any scrolling amount added 
on.

Please provide a URL to a page displaying the problem.

http://www.kelvinluck.com/assets/jquery/datePicker/v2/demo/datePicker.html

What version of the datepicker are you using? On what operating system? And 
Which Browser?

datepicker: * $Id: jquery.datePicker.js 98 2010-05-24 10:10:01Z kelvin.luck $
OS: iPhone OS 3.2
Browser: Safari

Please provide any additional information below.

This problem does not appear on previous versions of the iPhone OS (up to, and 
including, 3.1.3). 
I noticed it on my site and confirmed it exhibits the same behaviour on your 
demo pages.

In photo 1, I zoomed in a bit and scrolled to the right, then clicked on the 
second calendar pop-
up icon. The amount the top-left corner of the viewport is scrolled from the 
top-left corner of the 
page has been added to the position of the calendar.

Similarly, in photo 2, I simply scrolled down a bit and clicked on the first 
calendar pop-up icon. 
Again, the amount scrolled was added to the position of the calendar.

Frankly, this smacks of a bug in iPhone OS 3.2's WebKit as it's the only 
instance I've found where 
the calendars display incorrectly. Nevertheless, even a workaround would be 
appreciated.

Original issue reported on code.google.com by jnou...@gmail.com on 1 Jun 2010 at 5:53

Attachments:

• [photo 1.PNG](https://storage.googleapis.com/google-code-attachments/jquery-datepicker/issue-214/comment-0/photo 1.PNG)
• [photo 2.PNG](https://storage.googleapis.com/google-code-attachments/jquery-datepicker/issue-214/comment-0/photo 2.PNG)

[GoogleCodeExporter]

Well, you can close this one. It's a bug in jQuery.

http://forum.jquery.com/topic/offset-returns-incorrect-values-in-ipad
http://dev.jquery.com/ticket/6446

Original comment by jnou...@gmail.com on 3 Jun 2010 at 5:40

[GoogleCodeExporter]

Thanks for the update :) 

I was going to say that I would try to fix the problem if you could somehow 
send me
an iPad for testing but it sounds like someone will find a solution in jQuery 
itself...

Original comment by kelvin.l...@gmail.com on 4 Jun 2010 at 7:23

• Changed state: Done

[GoogleCodeExporter]

I've implemented a workaround for the time being that makes the calendars 
usable on iPads.

I replaced line 769:

var eleOffset = $ele.offset();

with:

var eleOffset = null;
if( /webkit.*mobile/i.test(navigator.userAgent) ) {
    eleOffset = $ele.position();
} else {
    eleOffset = $ele.offset();
}

By using position() instead, the calendar is placed directly centered on the 
button, rather than immediately below it, but that's fine for my 
purposes. The other fix noted in the links from my previous comment was to 
subtract window.scroll{X|Y} from the offset, but since the 
problem does not affect iPhones/iPod touches (and I didn't want to compare the 
user agent strings and fix the regex to work only on the 
iPad), that would cause the calendars to be mispositioned on those instead.

Original comment by jnou...@gmail.com on 4 Jun 2010 at 2:39