Opened 8 years ago

Closed 7 years ago

#7980 closed bug (notabug)

Viewport is incorrect in Firefox

Reported by: Jason.Callas@… Owned by: Jason.Callas@…
Priority: minor Milestone: 1.11.0
Component: ui.datepicker Version: 1.8.16
Keywords: Cc:
Blocked by: Blocking:

Description

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 8 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.

Thanks.

comment:2 Changed 8 years ago by Jason.Callas@…

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 8 years ago by Scott González (previous) (diff)

comment:3 Changed 8 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 8 years ago by Jason.Callas@…

Posted in jsFiddle as requested (http://jsfiddle.net/JCallas/dph9k/) 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 8 years ago by Scott González

Owner: set to Jason.Callas@…
Status: newpending

comment:6 Changed 8 years ago by Jason.Callas@…

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" "http://www.w3.org/TR/html4/loose.dtd">

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 http://jsfiddle.net/JCallas/dph9k/5/show/, 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 8 years ago by Scott González

Status: newopen

jQuery and jQuery UI do not support quirks mode.

comment:8 Changed 8 years ago by Jason.Callas@…

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

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

Milestone: 1.9.01.11.0

comment:10 Changed 7 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.