Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Already on GitHub? Sign in to your account

css-scrollbars detect returning true for IE 9 #698

Closed
dimensia opened this Issue Sep 19, 2012 · 9 comments

Comments

Projects
None yet
5 participants

I am using the css-scrollbars detect to determine if a scrollbar's width can be adjusted. This test is returning for me:

  • Safari (yes, correct)
  • Chrome (yes, correct)
  • Firefox (no, correct)
  • IE 9 (yes, incorrect)

Apparently other people are also seeing this issue. More information is in this pull request:

#393

Thank you!

fk commented Sep 27, 2012

Thanks for bringing this up again @dimensia – the notification somehow slipped off my radar, but boy am I glad I'm not the only one running into this.

As described in my original comment, I only experience the tests returning an incorrect "true" in IE9 and 8 in the context of our application but not in the isolated jsFiddle test case – which I just updated to Modernizr 2.6.2 (original comment and jsFiddle-link here).

A quick workaround is described here.

We're using a whole lot of other JavaScript-libraries and jQuery-plugins in our H5BP-based app, namely

  • jQuery 1.7.2
  • underscore 1.3.0
  • backbone 0.9.2
  • mustache 0.5.2
  • jquery.isotope 1.5.19
  • bootstrap-tooltip 2.0.4
  • jquery.quicksearch
  • jquery.scrollTo 1.4.1
  • jquery.select2 3.2
  • spin.js 1.2.5
  • jscrollpane 2.0.0beta12 (here's where the feature-detect comes into play)
  • jquery.mousewheel 3.0.6
  • mwheelIntent 1.2
  • jquery.smartresize
  • placeholder_polyfill.jquery.combo

but I haven't had the time for a stepwise removal yet and I also don't see much sense in it. I also don't think the feature-detect chokes on the CSS of our app – no global resets or anything nasty regarding html and body, overflows or similar things going on.

Owner

paulirish commented Oct 1, 2012

just for fun can you kill all the CSS in the app anyway?

fk commented Oct 2, 2012

@paulirish just did and the test still returns the incorrect "true" in both IE9/8 (using this Modernizr 2.6.2 custom build).

Just to be sure I really killed all CSS, I checked IE's dev-console CSS-tab, and just the styles for article, aside, figcaption, figure, footer, header, hgroup, nav, section and mark are showing up.

I'll try and remove the listed JavaScripts one-by-one tomorrow.

fk commented Oct 5, 2012

Sorry for taking a bit longer; I finally stripped down the index.aspx in question and now can report back that

  • I removed all external JavaScripts with no success (as expected) –
    Modernizr.cssscrollbar still returns an incorrect true in IE9 (I just tested in IE9 this time)
  • then I went on and removed everything else from the page, ending up with just
<script src="../js/lib/modernizr/modernizr.min.js"></script>
<script>alert(Modernizr.cssscrollbar);</script>
  • – no doctype, html, body, just those two lines – but no, test still returns true in IE9 …

Then – while already writing this – I think "let's give it a final try in IE8" and voila, the test returns false over there! One more check in IE9 – still the incorrect true … okay, so let's move back stepwise for IE8 then!


A few minutes later it seems I found out that IE8 returns the false true until I remove the <!doctype html> – while IE9 is quite unimpressed by that, still returning the false positive. Whee, this actually is fun ;)

New online examples for y'all to test plus a quick recap:

Owner

aFarkas commented Oct 7, 2012

In case the test element has a smaller height or width, than the scrollbar width the element collapses to the given width in IE9, therefore it returned a false positive. The old test inserted a $shy; inside of the div and gave this div a height. I'm now giving an explicit height and test returns false for IE9/IE8 now. Also tested Safari/Chrome/Firefox. Everything seems fine now :-).

Can anyone of you guys confirm it works and close the bug?

fk commented Oct 7, 2012

Just tested in

  • IE9 (9.0.8112.16421/Win 7)
  • IE8 (8.0.7601.17514/Win 7)
  • Chrome (22.0.1229.79 m/Win 7, 21.0.1180.57/OS X)
  • Firefox (15.0.1/Win 7)

and all tests now return as they should (even without the doctype ;)).
Thanks so much for fixing this Alexander, and for the thorough explanation.

I wish I could have been of more help/would have had the time to get my head around modernizr tests in general, and the differences between the original and the updated test in particular – indeed I just yesterday understood the purpose of the &shy; in the original test … oh well ;)

@aFarkas aFarkas closed this Oct 7, 2012

@SlexAxton SlexAxton added a commit to SlexAxton/Modernizr that referenced this issue Nov 5, 2012

@SlexAxton SlexAxton Merge branch 'master' of github.com:Modernizr/Modernizr
* 'master' of github.com:Modernizr/Modernizr: (81 commits)
  use setAttribute before using deprecated setAttributeNode
  explicitly set height in scrollbar test fixes false positive in IE9 (Issue #698)
  added page visibility API test
  Fix false negative of css table detect when document dir is rtl. Rewrote test. Fixes #716
  Update readme.md
  Remove BSD license and improve readme
  Added test for lossless WebP images
  Not by Addy Osmani
  binary websocket test likes to throw exceptions in Opera & Firefox and crash dolphin beta. nerfing for safety.
  navigator.cookieEnabled is a false pos in ie9. dont try it as a technique. thx @alrra. fixes #666
  bump 2.6.3pre on grunt
  bump to 2.6.3pre
  2.6.2
  When binding a function to a context, check that it actually has a bind method first.
  paul, you should always lint before you commit.
  sticky test. just formatting.
  whitespace. crlf's.
  fixing css-calc coding style, addTest gets no incoming arguments. ref #673
  Adds a test for position: (-webkit-)sticky support
  Make PhantomJS exit out of caniuse data matching early as it's unecessary
  ...
4093517

fk commented Mar 18, 2013

@aFarkas @SlexAxton - http://modernizr.com/download still includes the scrollbar test returning the false positive in IE9 :(

Owner

stucox commented Mar 18, 2013

I'm afraid there hasn't been a release since this ticket was closed. We're currently prepping v3.0 - this fix will be in there.

fk commented Mar 18, 2013

Thanks for the quick feedback Stu!

@patrickkettner patrickkettner pushed a commit to patrickkettner/Modernizr that referenced this issue Feb 22, 2015

@aFarkas aFarkas explicitly set height in scrollbar test fixes false positive in IE9 (…
…Issue #698)
544ee9c

@patrickkettner patrickkettner pushed a commit to patrickkettner/Modernizr that referenced this issue Feb 22, 2015

@SlexAxton SlexAxton Merge branch 'master' of github.com:Modernizr/Modernizr
* 'master' of github.com:Modernizr/Modernizr: (81 commits)
  use setAttribute before using deprecated setAttributeNode
  explicitly set height in scrollbar test fixes false positive in IE9 (Issue #698)
  added page visibility API test
  Fix false negative of css table detect when document dir is rtl. Rewrote test. Fixes #716
  Update readme.md
  Remove BSD license and improve readme
  Added test for lossless WebP images
  Not by Addy Osmani
  binary websocket test likes to throw exceptions in Opera & Firefox and crash dolphin beta. nerfing for safety.
  navigator.cookieEnabled is a false pos in ie9. dont try it as a technique. thx @alrra. fixes #666
  bump 2.6.3pre on grunt
  bump to 2.6.3pre
  2.6.2
  When binding a function to a context, check that it actually has a bind method first.
  paul, you should always lint before you commit.
  sticky test. just formatting.
  whitespace. crlf's.
  fixing css-calc coding style, addTest gets no incoming arguments. ref #673
  Adds a test for position: (-webkit-)sticky support
  Make PhantomJS exit out of caniuse data matching early as it's unecessary
  ...
9055bea
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment