Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP

Loading…

css-scrollbars detect returning true for IE 9 #698

Closed
dimensia opened this Issue · 9 comments

5 participants

@dimensia

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
fk commented

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.

@paulirish
Owner
@fk
fk commented

@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
fk commented

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:

@aFarkas
Owner

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
fk commented

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
@SlexAxton SlexAxton referenced this issue from a commit in SlexAxton/Modernizr
@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
fk commented

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

@stucox
Owner

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
fk commented

Thanks for the quick feedback Stu!

@patrickkettner patrickkettner referenced this issue from a commit in patrickkettner/Modernizr
@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
Something went wrong with that request. Please try again.