Bootstrap Carousel - CSS3 PIE breaks indicators cycling

Question

So on lots of sites I like to use CSS3 PIE to make IE 7-9 do border-radius decoration for rounded images etc.

For a new site I'm using the Carousel plugin on Twitter Bootstrap, and I'd like to get the carousel indicators rendered nicely for IE users.

My carousel works fine normally, cycling through correctly etc, but when I apply the PIE behaviour to the carousel indicators for old IE browsers (using the JavaScript version of PIE ) it stops the indicators from cycling correctly on slide. Obvious solution is to remove CSS3 PIE for the carousel indicators (leaving them ugly for users of old IE), but ideally I'd like to get it working.

Head Code snippet:

<!--[if (IE 7)|(IE 8)]>
    <script type="text/javascript" src="//cdn.jsdelivr.net/css3pie/2.0b1/PIE_IE678.js"></script>
<![endif]-->
<!--[if IE 9]>
    <script type="text/javascript" src="//cdn.jsdelivr.net/css3pie/2.0b1/PIE_IE9.js"></script>
<![endif]-->

Body Code snippet:

<div id="myCarousel" class="carousel slide">
            <ol class="carousel-indicators">
                <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
                <li data-target="#myCarousel" data-slide-to="1"></li>
                <li data-target="#myCarousel" data-slide-to="2"></li>
            </ol>
            <div class="carousel-inner">
                <div class="item active">
                    <img src="http://twitter.github.io/bootstrap/assets/img/examples/slide-01.jpg" alt=""/>
                </div>
                <div class="item">
                    <img src="http://twitter.github.io/bootstrap/assets/img/examples/slide-02.jpg" alt=""/>
                </div>
                <div class="item">
                    <img src="http://twitter.github.io/bootstrap/assets/img/examples/slide-03.jpg" alt=""/>
                </div>
            </div>
            <a class="left carousel-control" href="#myCarousel" data-slide="prev">&lsaquo;</a>
            <a class="right carousel-control" href="#myCarousel" data-slide="next">&rsaquo;</a>
    </div>

And then PIE:

<script type="text/javascript">
        $(function() {
            if (window.PIE) {
                $('.carousel-indicators li').each(function() {
                    PIE.attach(this);
                });
            }
        });
</script>

I'd guess the problem lies in the way that we've got active and inactive indicators, and that they keep changing on slide... but I'm not really sure how to fix it.

Full code is at http://www.edwardb.co.uk/test/ and you'll obviously need to use an old version of IE.

You don't need PIE to do border-radius on IE9; it supports it natively. PIE is only required in IE9 for the gradients. If all you're using it for is rounded corners you can drop it for IE9. That should make the decision easier to just drop PIE for older versions (IE8) if you decide to go that route. — Spudley, Jul 25 '13 at 13:31
Good to know, thanks. Use IE6 and IE8 as my old testing VMs, so must admit I haven't actually tested it in IE9 yet! Still, IE8 is my ideal target... as that's the "latest" IE for Win XP. — Westyfield2, Jul 25 '13 at 13:35
well, I'd still be inclined to consider dropping the rounded corners for IE8. It surely won't look *that* bad?? I love tools like CSS3Pie, but there comes a time when they're not worth it, and that time comes when they take more work than just a simple plug-in and go. — Spudley, Jul 25 '13 at 13:44

score 2 · Answer 1 · answered Nov 14 '13 at 17:03

I had the same problem and found a solution to fix it. The reason for the problem are the css3-container tags added by css3pie:

<ol class="carousel-indicators">
    <css3-container ...>...</css3-container>
    <li>...</li>
    <css3-container ...>...</css3-container>
    <li>...</li>
    ...
</ol>

When an active slider item changes, the carousel js activates the nth carousel indicator (including the css3-container-tags). In the case the first item is visible, the first child node of "carousel-indicators" has the "active" class.

My solution is, to bind to the "slid" event, it's fired after the new item is set active. The only problem with this solution is, that the carousel js itself also uses the "slid" event to activate the current indicator. Because of that i just added a setTimeout call, if there is any other possiblity please tell me.

$('.carousel').on('slid', function(e) {
    if($('html').is('.lt-ie9')) {
        var carousel = $(this);
        var items = $('.carousel-inner .item', carousel);
        var indicators = $('.carousel-indicators', carousel).children();
        if (items.length !== indicators.length) {
            setTimeout(function() {
                var active_index = items.filter('.active').index();
                indicators.removeClass('active');
                $(indicators.filter('li').get(active_index)).addClass('active');
            }, 250);
        }
        return false;
    }
});

Bootstrap Carousel - CSS3 PIE breaks indicators cycling

1 Answers1