WordPress.org

Ready to get started?Download WordPress

Forums

Responsive Slider
Fade transition not working in IE8 (6 posts)

  1. aaron.lane
    Member
    Posted 1 year ago #

    Hello,

    Great slider.

    In testing, we noticed the Fade Transition does not work in IE8, but does work in IE7. We encountered the same issue when testing on the Responsive Slider demo site as well.

    Why does the Fade Transition not work in IE8?

    Thanks,
    Aaron

    http://wordpress.org/extend/plugins/responsive-slider/

  2. graphicbear
    Member
    Posted 1 year ago #

    Yes, I noticed this as well. I'm wondering if there is a fix for this?

  3. aaron.lane
    Member
    Posted 1 year ago #

    Hello,

    Just following up on our question from a couple weeks ago.

    Wondering if there is a fix for the Fade Transition in IE8?

    Thanks,
    Aaron

  4. aaron.lane
    Member
    Posted 1 year ago #

    Hello,

    After some searching, I found this solution that seems to be working after very minimal testing.

    http://stackoverflow.com/questions/2766735/jquery-fadein-fadeout-ie8-does-not-fade

    Simply apply the following css to all elements within the

  5. elements:

    filter: inherit;
    opacity: inherit;

    In my case, I made some modifications to the responsive-slider.php, so my css looks like this:

    html.ie8 .responsive-slider.flexslider .slides li .slide,
    html.ie8 .responsive-slider.flexslider .slides li .slide a,
    html.ie8 .responsive-slider.flexslider .slides li .slide a img,
    html.ie8 .responsive-slider.flexslider .slides li .slide-title,
    html.ie8 .responsive-slider.flexslider .slides li .slide-title a,
    html.ie8 .responsive-slider.flexslider .slides li .slide-title a h2,
    html.ie8 .responsive-slider.flexslider .slides li .slide-title a p {
    	filter: inherit !important;
    	opacity: inherit !important;
    }

    I haven't tested if every single element within the

  6. has to be declared, nor have I tested if the !important declarations are necessary, but I went ahead and did it anyway and it works.

    Hope that helps.

    Cheers,
    Aaron

  • katiewp
    Member
    Posted 1 year ago #

    A little late in the game, but based on Aaron's finding, I found a simpler way. I just added this into my child theme's CSS.

    .responsive-slider.flexslider * {
    	opacity: inherit; filter: inherit;
    }

    Don't remove the asterisk.

  • katiewp
    Member
    Posted 1 year ago #

    My above IE8 "fix" breaks the slider on mobile devices. I couldn't get IE8 hacks to work, so I removed it. IE8 is <8% of browsers, so I would rather support mobile browsers. I detest IE...

  • Topic Closed

    This topic has been closed to new replies.

    About this Plugin

    About this Topic

    Tags