Opened 11 years ago

Closed 10 years ago

#7980 closed bug (notabug)

Viewport is incorrect in Firefox

Reported by: [email protected] Owned by: [email protected]
Priority: minor Milestone: 1.11.0
Component: ui.datepicker Version: 1.8.16
Keywords: Cc:
Blocked by: Blocking:


The _checkOffset function uses clientWidth and clientHeight of document.documentElement to get the dimensions of the viewable window. The proper method to use in Firefox is innerWidth and innerHeight of window.

For example, on a sample page I made the following was returned

console.log(document.documentElement.clientHeight);	// returned 295
console.log(window.innerHeight);			// returned 617

This actually caused the dialog to pop up above the input box even though there was plenty of vertical space available.

Change History (10)

comment:1 Changed 11 years ago by tj.vantoll

Could you please attach the source of the sample page that you're using to create this situation. I can't come up with a way to make the values of document.documentElement.clientHeight & window.innerHeight to differ in Firefox 9.


comment:2 Changed 11 years ago by [email protected]

The problem seems to appear when the calendar would extend below the last element on the page even if there is empty space to the bottom edge of the window. Looks like Firefox calculates clientHeight to the last element whereas IE calculates it to the edge of the window.

I apologize because I do not see a way to upload the attachment so I copy/pasted very stripped down code that duplicate the issue.

EDIT: large block of code removed.

Last edited 11 years ago by Scott González (previous) (diff)

comment:3 Changed 11 years ago by Scott González

Please use jsFiddle or jsbin, as mentioned in the big red box. It's also not helpful to have ASP-specific code in your example.

comment:4 Changed 11 years ago by [email protected]

Posted in jsFiddle as requested ( but because of the way the jsFiddle page is rendered it does not reproduce the problem.

As I stated in previous posting, the *last element* on the page needs to be away from bottom edge of the Firefox window. If you take the previously posted HTML and drop it into a plain old html file and display it in FF you will see the problem.

Thank you.

comment:5 Changed 11 years ago by Scott González

Owner: set to [email protected]
Status: newpending

comment:6 Changed 11 years ago by [email protected]

Status: pendingnew

I think I have discovered what is going on. Unfortunately I am not sure how to duplicate this exactly using jsFiddle.

It turns out the problem is a Quirks mode vs Standards compliance mode. My test page (and original page) has a document type of

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

However, the proper format should be

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "">

Using Information --> View Page Information from Web Developer I can see that the shortened document type puts the page in Quirks mode. It is in this mode that the clientHeight and innerHeight return different values. Using the full document type the two properties return the same value and the calendar renders below the input.

The easiest way to confirm this would be to view, view the source, copy it to an editor, shorten the doc type to <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">, and then view the modified source in the browser.

comment:7 Changed 11 years ago by Scott González

Status: newopen

jQuery and jQuery UI do not support quirks mode.

comment:8 Changed 11 years ago by [email protected]

Understood. At least it was identified. Thank you for your assistance.

comment:9 Changed 10 years ago by Scott González


comment:10 Changed 10 years ago by Scott González

Resolution: invalid
Status: openclosed

Not sure why I didn't close this before.

Note: See TracTickets for help on using tickets.