html { overflow-y: scroll; } jQuery UI drag/droppable in Firefox #65

jalexanderfox opened this Issue Dec 20, 2011 · 3 comments

2 participants


First of all, I love the idea of this project, so thanks for making it happen.

So, I had a whole thing written up about this issue and then I realized how edge case this is...
Conditions that cause this issue for jQuery UI and Firefox (3x & 8x):
html { overflow-y:scroll; }
.container-for-dragable { position:[anything other than inherit] }

(issue discussed here:

I think this is worth noting because the declaration "overflow-y: scroll;" does not only tell the browser (firefox in this case) to just add a vertical scrollbar, it can affect the calculation of positioned elements as well. Though it is important to make enhancements and make browsers more user friendly if possible, consideration for breaking things down the dom are also important.

"Keeps page centred [sic] in all browsers regardless of content height"
Oh, line 61, centered is spelled wrong.

Thanks again!


I'm interested in understanding if this is, at root, a jQuery UI, Firefox, or Normalize bug.

Oh, line 61, centered is spelled wrong.

That's how we spell it in the UK.


Woops, I guess that's like colour/color or theatre/theater. I've seen centre but not the plural "centred". You know, sometimes USAmericans think they are the only people in the world that speak/spell English...

From a birds-eye view, I don't think it is a normalize bug and I suspect jQuery UI could be modified to account for this issue, but it is definitely in the way that Firefox handles it's overflow-y:scroll, because this is a non-issue in Chome win/mac (16.0.912.63), safari, IE8/9. The behavior is that the position of the dragged element is relative to the page instead of the viewport. But I have not taken the time to look at jQuery UI to find out how it is getting its offset for the dragged element. It seems this is a known issue because of the link I provided in the previous comment.

Anyway, just wanted to mention it since it took me a bit of time dealing with it today and it had a little bit do with normalize (because I had this bit of normalize js in the work).


Hmmm, I'm considering dropping this rule from normalize.css because it is a relatively minor aesthetic fix that seems to have some fairly significant edge-case consequences in Firefox. Given this problem has been part of Firefox for years and seems unlikely to be fixed any time soon, I think the sensible thing would be to modify normalize.css.

@necolas necolas referenced this issue in h5bp/html5-boilerplate Jan 17, 2012

Remove `html {overflow-y:scroll}` due to Firefox bugs #918

@necolas necolas added a commit that referenced this issue Jan 22, 2012
@necolas Remove scrollbar normalization. Fix #64 #65
The `html` scrollbar normalization can cause issues in Firefox
when certain techniques are used by JS plugins (e.g. modals).
@necolas necolas closed this Jan 22, 2012
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment