Transparent PNG (24) issue in IE8 and below using jQuery Cycle

Question

I'm using jQuery cycle to fade my slideshow in / out.

My slides have a background, and their are semi-transparent PNG's (using tag) within my slides. While the slide is fading in, the semi-transparent areas have black splotches. These splotches disappear after the slide has fully faded in.

I've gotten around this sort of thing using using AlphaImageLoader within the CSS, but these cannot be background images.

Any thoughts? If needed, I can setup a demo.

Thanks in advance for any help!

I've simplified it and uploaded an example here:

http://dustland.markrichterjr.com/cycle/sample.html

HTML

            <ul class="trending-slides">
                <li>
                    <a href="#"><img src="assets/images/home-trending-phones.png" alt="Phones" /></a>
                    <div class="text">
                        <a class="headline" href="#"><img src="assets/images/home-trending-headline.png" alt="" /></a>
                        <a class="learnmore" href="#">Learn More</a>
                        <p><a href="#">"Lorem ipsum dolor sit amet, consectetur adipisicing
                        elit, sed do eiusmod tempor incididunt ut."</a></p>
                    </div>
                </li>
                <li>
                    <img src="assets/images/home-trending-tablets.png" alt="Tablets" />
                    <div class="text">
                    <div class="text">
                        <a class="headline" href="#"><img src="assets/images/home-trending-headline.png" alt="" /></a>
                        <a class="learnmore" href="#">Learn More</a>
                        <p><a href="#">"Lorem ipsum dolor sit amet, consectetur adipisicing
                        elit, sed do eiusmod tempor incididunt ut."</a></p>
                    </div>
                </li>
                <li>
                    <img src="assets/images/home-trending-accessories.png" alt="Accessories" />
                    <div class="text">
                    <div class="text">
                        <a class="headline" href="#"><img src="assets/images/home-trending-headline.png" alt="" /></a>
                        <a class="learnmore" href="#">Learn More</a>
                        <p><a href="#">"Lorem ipsum dolor sit amet, consectetur adipisicing
                        elit, sed do eiusmod tempor incididunt ut."</a></p>
                    </div>
                </li>
                <li>
                    <img src="assets/images/home-trending-support.png" alt="Support" />
                    <div class="text">
                        <a class="headline" href="#"><img src="assets/images/home-trending-headline.png" alt="" /></a>
                        <a class="learnmore" href="#">Learn More</a>
                        <p><a href="#">"Lorem ipsum dolor sit amet, consectetur adipisicing
                        elit, sed do eiusmod tempor incididunt ut."</a></p>
                    </div>
                </li>
            </ul>

CSS

            .home-page-content .most-viewed .trending-slides, .home-page-content .most-viewed .trending-slides li {
                width:630px;
                height:124px;
                margin:0;
                padding:0;
                overflow:hidden;
                list-style:none;
                background:transparent !important;
            }
            .home-page-content .most-viewed .trending-slides li {
                background:url(../images/bg-home-trending.jpg) no-repeat 100% 0;
            }

JavaScript

    $('.home-page-content .most-viewed .trending-slides').cycle({
        fx: 'fade',
        before: function(currSlideElement, nextSlideElement) {},
        speedIn: 250,
        speedOut: 100,
        after: function(currSlideElement, nextSlideElement) {
            $('.text', nextSlideElement).show('fade', 125);
            $('.text', currSlideElement).hide();
        },
        sync: false,
        timeout: 0,
        pagerEvent: 'mouseover',
        pager: '.trending-nav',
        pagerAnchorBuilder: function(idx, slide) {
            // return selector string for existing anchor
            return '.trending-nav li:eq(' + idx + ') a';
        },
        cleartype: true,
        cleartypeNoBg: false
    });

IE8 and earlier has really bad transparency support. JQuery gives you tools to make it easier to use transparency and fading effects in IE, but it doesn't fix the bugs. :-( — Spudley, Jul 25 '11 at 20:18

score 0 · Answer 1 · edited May 23 '17 at 09:58

0

What is happening in your application is that IE7 is applying the alpha filter to your PNG, and is then asked by jQuery to apply another alpha filter for the fade. This has visible results like you said.

The way to get around this is to nest your png inside a container and then fade the container.

Full answer was given by Darko Z

edited May 23 '17 at 09:58

Community

1
1

answered Jul 28 '11 at 00:15

makeitmorehuman

11,287
3
52
76

Transparent PNG (24) issue in IE8 and below using jQuery Cycle

1 Answers1