Removing Inline Opacity Filters After Fade-In / Fade-Out Transitions In IE8
Posted March 15, 2013 at 4:50 PM by Ben Nadel
Recently, I demonstrated how to use jQuery's .css() method to clear inline CSS left in-place after a jQuery transition. This approach has been working well; but, recently, I found out that this approach falls short in IE8 (and IE7) when dealing with alpha / opacity filters. No matter what I did - no matter which CSS properties I cleared - "filter", "opacity", "-ms-filter" - nothing worked! Thankfully, I came across this GitHub issue posted by Mark Matyas, which demonstrated how to remove the filter property explicitly.
| | | | ||
| | | |||
| | | |
The trick turned out to be removing the "filter" attribute of the style object after the fade transition had completed:
- this.style.removeAttribute( "filter" );
I don't know enough about all the inter-browser oddities to really tell you why it happens this way; for years, I've been using jQuery to encapsulate all that detail. And, if you read the source code of jQuery, it looks like it does take this IE-specific oddity into consideration in the CSS-Hooks (see ticket #6652). But, for some reason, my specific context doesn't work.
Anyway, here's a quick demo with this logic in place:
- <!doctype html>
- <!--[if lt IE 9]>
- <html class="lt-ie9">
- <![endif]-->
- <!--[if gt IE 8]><!-->
- <html>
- <!--<![endif]-->
- <head>
- <meta charset="utf-8" />
-
- <title>
- Removing Inline Filters After FadeIn / FadeOut In IE
- </title>
-
- <style type="text/css">
-
- ul li {
- filter: alpha( opacity = 0 ) ;
- opacity: 0 ;
- position: relative ;
- zoom: 1 ;
- }
-
- ul.visible li {
- filter: alpha( opacity = 100 ) ;
- opacity: 1 ;
- }
-
- </style>
- </head>
- <body>
-
- <h1>
- Removing Inline Filters After FadeIn / FadeOut In IE
- </h1>
-
- <ul class="list visible">
- <li>
- Thing One
- </li>
- <li>
- Thing Two
- </li>
- </ul>
-
- <p>
- <a href="#" class="toggle">Toggle</a> -
- <a href="#" class="fader">Fade Out</a>
- </p>
-
-
-
- <!-- Load jQuery from the CDN. -->
- <script
- type="text/javascript"
- src="//code.jquery.com/jquery-1.9.1.min.js">
- </script>
- <script type="text/javascript">
-
-
- // Hook up the toggle to add/remove the visible class.
- $( "a.toggle" ).click(
- function( event ) {
-
- $( "ul" ).toggleClass( "visible" );
-
- }
- );
-
-
- // Hook up the fader to fade-out / fade-in the list items.
- $( "a.fader" ).click(
- function( event ) {
-
- $( "ul li" )
- .fadeOut( 1000 )
- .fadeIn( 1000, handleFade ) // Clean up CSS.
- ;
-
- }
- );
-
-
- // I handle the clean-up for the fade-in action. This will
- // execute for EACH item in the transitioning collection.
- // When this executes, THIS will refere to the DOM element
- // being faded-in.
- function handleFade() {
-
- // Clear any inline CSS properties that may be left over
- // from the fade-in / fade-out transition.
- $( this ).css({
- display: "",
- opacity: "",
- filter: "",
- zoom: ""
- });
-
- // If we are currently working with IE7 / IE8, then
- // clearing the inline CSS won't actually be enough. We
- // have to remove the filter attribute explicitly.
-
- var isIE = !! $( "html.lt-ie9" ).length;
-
- if ( isIE ) {
-
- this.style.removeAttribute( "filter" );
-
- }
-
- }
-
-
- </script>
-
- </body>
- </html>
Hope this helps - it took me about 4 hours to get to the bottom of this.
Reader Comments
Thanks for the tip.
What is this?
!! $( "html.lt-ie9" ).length
I've never seen that before:
"html.lt-ie9"
Is that a jQuery hook for tesing in IE?
Ignore above post.
nvm - found it. sorry :-(
Re: "4 hours to get to the bottom of this."
Simple Fix ...
if ( isIE ) {
window.location "http://www.mozilla.org/en-US/firefox/channel/#aurora"
}
@James,
No problem :)
@Edward,
Ha ha, I wish it were that easy ;)
