Update 3rd of March 2016: I've tested for this bug with the latest versions of Internet Explorer, Firefox and Chrome, using the latest jQuery libraries (1.12.1, 2.2.1 and 3.0.0.beta) and it could not be reproduced. The rest of the article may be obsolete.

So I am building this new jQuery based control and I am terribly smug about it until I run the test site on FireFox. Kaboom! Nothing is working. Why? Because FireFox has some issues with the computed style on hidden elements and jQuery people just don't want to fix the problem. But hey, jQuery is open source, right?

So, let's detail the problem. Here is a jQuery bug posting that explains far better than I could what is going on. Apparently, the offsetParent of a hidden element is null in FireFox and the jQuery core function returns the document object when null is given as a parameter [ $(null)==document ]. Then running the FireFox specific function for getting the computed style [ document.defaultView.getComputedStyle(element,null) ] throws an error because the element is now document and it has no style, only its body has.

So, why not fix that? The FireFox error text is '[Exception... "Could not convert JavaScript argument arg 0 [nsIDOMViewCSS.getComputedStyle]" nsresult: "0x80570009 (NS_ERROR_XPC_BAD_CONVERT_JS)" location: "JS frame :: /jqueryJsFile/ :: anonymous :: line 1349" data: no]'.

The line number might vary with the type of jQuery file version you are using and the amount of modifications you have done to it. What you should find at said line is something like: var computedStyle = defaultView.getComputedStyle(elem, null);.

Solution: Just add above it if (elem == document) elem = document.body; and it solves this particular issue.

In the minifyied version look for var M=q.getComputedStyle(I,null) and add before it if (I==document) I=document.body;


It would be far more elegant to address the problem where the offsetParent is assumed to be not null, but with so many plugins for jQuery, you can't just test them all.

Comments

Siderite

<p>No :) I meant what I wrote. But be warned that this post is pretty dated. I don't know how relevant it remains.</p>

Siderite

Anonymous

<p>Not =&gt;<br>var computedStyle = defaultView.getComputedStyle(elem, null);<br><br>Did you mean =&gt;<br>var getcomputedStyle = defaultView.getComputedStyle(elem, null);</p>

Anonymous

Siderite

No :) I meant what I wrote. But be warned that this post is pretty dated. I don&#39;t know how relevant it remains.

Siderite

Anonymous

Not =&gt;<br>var computedStyle = defaultView.getComputedStyle(elem, null);<br><br>Did you mean =&gt;<br>var getcomputedStyle = defaultView.getComputedStyle(elem, null);

Anonymous

Anonymous

<p>thanks a lot dude!<br>you save me a lot of hours!</p>

Anonymous

Siderite

<p>All you have to do is debug it and see where the error is generated, then add a bit of code that checks for elem not being <i>document</i>, but <i>document.body</i>.</p>

Siderite

Siderite

All you have to do is debug it and see where the error is generated, then add a bit of code that checks for elem not being <i>document</i>, but <i>document.body</i>.

Siderite

Anonymous

<p>"var M=q.getComputedStyle(I,null)" isn't present in jquery-1.6.2.min.js, dang..</p>

Anonymous

Anonymous

&quot;var M=q.getComputedStyle(I,null)&quot; isn&#39;t present in jquery-1.6.2.min.js, dang..

Anonymous

Siderite

<p>It would be helpful if you could replicate the error in a small piece of code and send it to me. Then I will fix it for you.</p>

Siderite

Siderite

It would be helpful if you could replicate the error in a small piece of code and send it to me. Then I will fix it for you.

Siderite

Arsen

<p>It didn't work for jquery-1.5. Can you test yourself?<br><br>I've find the error line 5900<br><br> if ( (computedStyle = defaultView.getComputedStyle( elem, null )) ) {<br> ret = computedStyle.getPropertyValue( name );<br> if ( ret === "" &amp;&amp; !jQuery.contains( elem.ownerDocument.documentElement, elem ) ) {<br> ret = <a href="http://jQuery.style" rel="nofollow noopener" title="jQuery.style">jQuery.style</a>( elem, name );<br> }<br> }<br><br><br>and added above it <br>if (elem == document) elem = document.body;<br><br>but it continues to throw an error</p>

Arsen

Arsen

It didn&#39;t work for jquery-1.5. Can you test yourself?<br><br>I&#39;ve find the error line 5900<br><br> if ( (computedStyle = defaultView.getComputedStyle( elem, null )) ) {<br> ret = computedStyle.getPropertyValue( name );<br> if ( ret === &quot;&quot; &amp;&amp; !jQuery.contains( elem.ownerDocument.documentElement, elem ) ) {<br> ret = jQuery.style( elem, name );<br> }<br> }<br><br><br>and added above it <br>if (elem == document) elem = document.body;<br><br>but it continues to throw an error

Arsen

F. Hobein

<p>Just what I needed. Thanks a lot!</p>

F. Hobein

Ariel Popovsky

<p>Thanks man! saved me a lot of debugging time.</p>

Ariel Popovsky

Ariel Popovsky

Thanks man! saved me a lot of debugging time.

Ariel Popovsky

Siderite

<p>I am glad you like the content. I am not great at web design, so if you have any suggestions, I am willing to listen. You might like the "low band version" of the blog, accessible via the link under the title.</p>

Siderite

Siderite

I am glad you like the content. I am not great at web design, so if you have any suggestions, I am willing to listen. You might like the &quot;low band version&quot; of the blog, accessible via the link under the title.

Siderite

PC-PDX.com

<p>thanks tons!<br>What up with the Cats? i kind of love it. I wish this layout were a little friendlier because you have great content. Thanks thanks thanks</p>

PC-PDX.com

PC-PDX.com

thanks tons!<br>What up with the Cats? i kind of love it. I wish this layout were a little friendlier because you have great content. Thanks thanks thanks

PC-PDX.com

Bruno

<p>Thank you, sir. Just what I needed. Saved me a headache.</p>

Bruno

Bruno

Thank you, sir. Just what I needed. Saved me a headache.

Bruno

yulii

<p>Great! I've taken a lot of trouble with the same issue. <br>It causes of an error at Opera and Firefox.<br>Thank you. :)</p>

yulii

yulii

Great! I&#39;ve taken a lot of trouble with the same issue. <br>It causes of an error at Opera and Firefox.<br>Thank you. :)

yulii

sunil

<p>great post! just helped me out a lot. thanks :)</p>

sunil

Post a comment