jQuery.cssHooks.opacity throws exception on non-IE browsers

[poulbak]

Whenever a browser returns 'false' for '$.support.opacity' the cssHooks.opacity code will be called. However, for non-IE browsers this will throw an exception on line 6522:

 style.removeAttribute( "filter" );

because only IE has this method. I don't know how many browsers this concerns, but I think it would be best if no browsers throw exceptions. Honestly I don't understand the code cssHooks.opacity, but a simple way to prevent the error would of course be to wrap the call in a test like this:

if ( style.removeAttribute )
{
    style.removeAttribute( "filter" );
}

[Timmy Willison]

Thanks for taking the time to contribute to the jQuery project! Please provide a complete reduced test case on jsFiddle to help us assess your ticket.

Additionally, be sure to test against the jQuery Edge version to ensure the issue still exists. To get you started, use this boilerplate: ​http://jsfiddle.net/FrKyN/ Open the link and click to "Fork" (in the top menu) to get started.

[trac-o-bot]

Because we get so many tickets, we often need to return them to the initial reporter for more information. If that person does not reply within 14 days, the ticket will automatically be closed, and that has happened in this case. If you still are interested in pursuing this issue, feel free to add a comment with the requested information and we will be happy to reopen the ticket if it is still valid. Thanks!

[jfaris]

This is happening when running our Jasmine tests (in HtmlUnit). The exception message is "Cannot find function removeAttribute in object [object CSSStyleDeclaration]"

[pigletto@…]

The problem still exists in 1.7.1.

I've created a script that exposes a problem (requires jruby). Archive containing script and necessary jar files is available at: ​http://natcam.pl/media/htmlunit_jquery.tar.gz (start with ./run.sh)

Problem is caused by assumption (in jQuery code) that if a browser does not support 'opacity' then it supports style.removeAttribute. It is not true eg. for HTMLUnit browser. It is a result of these calls:

1. jQuery checks for opacity support:

opacity: /^0.55/.test( a.style.opacity ),

which results in:

jQuery.support.opacity == false

2. jQuery sets cssHook if browser doesn't support opacity:

if ( !jQuery.support.opacity ) {
	jQuery.cssHooks.opacity = {
            (...)
            style.removeAttribute( "filter" );
            (...)
        }
}

[dmethvin]

HtmlUnit is not on our list of supported browsers.

[anonymous]

It does not matter whether you are supporting HtmlUnit browser or not. This way of writing code is dirty.

[howard@…]

removeProperty is the W3C defined method. It's apparently not supported by IE <= 9. IE provides equivalent-ish functionality with removeAttribute.

So it seems like forward-looking code might look something like:

  function removeStyleProperty(style,prop) {
    if (style.removeProperty) {
        style.removeProperty(prop);
        removeStyleProperty = function(style,prop) {style.removeProperty(prop);}
    } else if (style.removeAttribute) {
        style.removeAttribute(prop);
        removeStyleProperty = function(style,prop) {style.removeAttribute(prop);}
    }
  }

[anonymous]

Please re-open this ticket, it's bitting me in jsdom, working with nodejs.

[gnarf]

Fixed this in ​https://github.com/jquery/jquery/commit/07e50933c4293818c5b36d368368656844e4df88 - just typoed the bug number... :(

[Timmy Willison]

#12178 is a duplicate of this ticket.

[anonymous]

For anyone who found this page, but was stuck using 1.6.4 with HTMLUnit, I've found a workaround is to set a custom WebClient ScriptPreProcessor which does the following:

public String preProcess(HtmlPage htmlPage, String sourceCode, String sourceName, int lineNumber, HtmlElement htmlElement)
{
  if(sourceName.contains("jquery-1.6.4"))
  {
    int startCodeIndex = sourceCode.indexOf("style.removeAttribute(");
    StringBuffer replacementCode = new StringBuffer();
    replacementCode.append(sourceCode.substring(0, startCodeIndex ));
    replacementCode.append("try{");
    int endCodeIndex = sourceCode.indexOf(";", startCodeIndex ) + 1;
    replacementCode.append(sourceCode.substring(startCodeIndex , endCodeIndex));
    replacementCode.append("}catch(e){}");
    replacementCode.append(sourceCode.substring(endCodeIndex));
    return replacementCode.toString();
  }
  return sourceCode;
}

WARNING: Obviously this is not performing the required opacity behaviour, so do not use it if you require this. However it stops the test throwing an exception, or thousands of them if, like me, you are using it in a fadeout timer.