zoloft pills

IE bugs caused by CSS filter property fixed in jQuery 1.7

I assume that everyone knows about IE’s ‘filter‘ CSS property. We use it on IE< =8 mainly because they don’t support the W3C opacity property.

The new jQuery 1.7 finally added a fix to an issue with IE’s ‘filter’ property. If you look at jQuery 1.7’s source code, you see that it does style.removeAttribute( “filter” ) when opacity is 1 upon setting the opacity csshook.

The jQuery upgrade eliminates the need for us to do something like this:

j_obj.animate({opacity: 1}, 500, function() {
$(this)[0].style.removeAttribute('filter'); // remove filter property at the end of animation... no longer needed in jQuery 1.7 and higher
// alternative: $(this).css('opacity', '');

Why did we have to manually remove the filter CSS property for IE when opacity is 1, and why is jQuery finally doing it internally?

To recap, the filter of IE property is the cause of a few common IE bugs:

Fuzzy/ blurry text

This occurs on IE6 and IE7. Text would look fuzzy after some opacity animation if the filter CSS property is left behind. As stated early, this can be fixed by manually removing the filter property. See another blog post for more information.

Content clipping/ cut-off

This occurs on IE8 only. Elements/ containers/ divs can be cut off at the edge of the parent container even if various tricks (z-index, position: absolute, overflow: visible) are already applied. The solution is, again, to remove the filter property. See another blog post for more information. (Thanks my colleague, Pavel Sergeev, in Russia, for pointing this out.)

Other changes

  • When you upgrade jQuery to version 1.7, pay attention to any instance of jQuery.isNaN(), which is removed in this version of the library. Also, event.layerX/layerY is changed to event.originalEvent.layerX/layerY, so be sure to modify your code accordingly.
  • jQuery 1.7 is less forgiving about passing in non-function to, for example, .load(), when a function is expected. Prior to 1.7, it still worked if a setTimeout, which would return a timer ID, is directly being passed in to the event.
  • If you have any swf objects in your app, watch out for an “object expected” error in IE. It’s probably trying to do elem.getAttribute() on an elem that is an object DOM element (with the <object> tag).
You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.
Leave a Reply

XHTML: You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>