freqdec / fd-slider

An Unobtrusive Accessible Slider script that can also be used as an HTML5 Input Range polyfill solution
Other
264 stars 55 forks source link

IE7 error: Invalid argument at line 1008 #6

Closed mathiasbynens closed 13 years ago

mathiasbynens commented 13 years ago

IE7 is throwing an “invalid argument” error on this line: https://github.com/freqdec/fd-slider/blob/master/js/fd-slider.js#L1008

Screenshot of the issue

I think it’s because handle.offsetLeft is returning negative values in IE7.

Removing that line effectively seems to prevent the error from being thrown, but then of course the slider bars are broken.

Note that your script works fine on its own; only now that I added it to a page with a lot of other scripts in it (not mine) this issue comes up. Before I dive into all the other scripts used on that page, could you please tell me if you’ve seen this before by any chance? Any ideas on how to fix it?

mathiasbynens commented 13 years ago

OMG, finally found what was causing the issue:

.ie7 * { zoom: 1; }

WHAT IS THIS I DONT EVEN

freqdec commented 13 years ago

Hi Mathias,

It appears I might have to double check the offset's are available before using them e.g.

rangeBar.style["width"] = (handle.offsetLeft || 0) + "px";

I've never seen this one before - the error message is, as usual, not particularly helpful.

I initially thought that I may have declared "handle" as a global variable and that it was getting overwritten by another script but a quick look at the code debunks that theory; "handle" is declared local to the slider object and cannot be overwritten.

Sorry I can't be of more use! I always feel like an asshat when sending "I have no idea" replies.

Shall look into it this weekend in more detail.

On Thu, May 19, 2011 at 9:46 AM, mathiasbynens < reply@reply.github.com>wrote:

Im not sure why, but IE7 is throwing an invalid argument error on this line: https://github.com/freqdec/fd-slider/blob/master/js/fd-slider.js#L1008

Screenshot of the issue

Removing that line effectively seems to fix the issue, but then of course the slider bars are broken.

Note that your script works fine on its own; only now that I added it to a page with a lot of other scripts in it this issue comes up. Before I dive into all the other scripts used on that page, could you please tell me if youve seen this before by any chance? Any ideas on how to fix it?

Reply to this email directly or view it on GitHub: https://github.com/freqdec/fd-slider/issues/6

mathiasbynens commented 13 years ago
rangeBar.style["width"] = (handle.offsetLeft || 0) + "px";

That wouldn’t work, since it won’t use the 0 if handle.offsetLeft gets a negative value.

In this case, the problem was caused by this horrible piece of CSS:

.ie7 * { zoom: 1; }

Somehow, this causes handle to get a negative offsetLeft in IE7.

It’s definitely not a bug in FD-Slider, but if there is a way to work around it (I doubt it) it may be worthwhile to do so.

freqdec commented 13 years ago

Dam, you're fast man...

That's a very nasty piece of CSS indeed. Perhaps a Math.max inclusion might be in order:

rangeBar.style["width"] = Math.max(0, (handle.offsetLeft || 0)) + "px";

Shall add it to git this weekend.

Thanks again, Brian.

On Thu, May 19, 2011 at 11:46 AM, mathiasbynens < reply@reply.github.com>wrote:

rangeBar.style["width"] = (handle.offsetLeft || 0) + "px";

That wouldnt work, since it wont use the 0 if handle.offsetLeft gets a negative value.

In this case, the problem was caused by this horrible piece of CSS:

.ie7 * { zoom: 1; }

Somehow, this causes handle to get a negative offsetLeft in IE7.

Its definitely not a bug in FD-Slider, but if there is a way to work around it (I doubt it) it may be worthwhile to do so.

Reply to this email directly or view it on GitHub: https://github.com/freqdec/fd-slider/issues/6#comment_1202531

mathiasbynens commented 13 years ago

I haven’t come across a situation where handle.offsetLeft is falsy, so I’m not sure the || 0 is really needed.

Using Math.max() would prevent IE7 from throwing the error, but then the slider wouldn’t work if handle.offsetLeft is negative, which it shouldn’t be unless you use really weird CSS like the rule set I came across. Perhaps it would be useful to throw an error from within fd-slider, saying “Negative value for offsetLeft detected — are you using zoom: 1 where you shouldn’t?” Or maybe it’s not worth the hassle for this edge case, I don’t know. Just throwing it out there.

Thanks!