Opened 11 years ago
Closed 10 years ago
#7980 closed bug (notabug)
Viewport is incorrect in Firefox
| Reported by: | Owned by: | ||
|---|---|---|---|
| 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 11 years ago by
comment:2 Changed 11 years ago by
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.
comment:3 Changed 11 years ago by
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
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 11 years ago by
| Owner: | set to [email protected]… |
|---|---|
| Status: | new → pending |
Works for me: http://jsfiddle.net/dph9k/1/show/
comment:6 Changed 11 years ago by
| Status: | pending → new |
|---|
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 11 years ago by
| Status: | new → open |
|---|
jQuery and jQuery UI do not support quirks mode.
comment:8 Changed 11 years ago by
Understood. At least it was identified. Thank you for your assistance.
comment:9 Changed 10 years ago by
| Milestone: | 1.9.0 → 1.11.0 |
|---|
comment:10 Changed 10 years ago by
| Resolution: | → invalid |
|---|---|
| Status: | open → closed |
Not sure why I didn't close this before.
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.