Bootstrap 3 Carousel issues with flipping

Question

let me explain you my problem.

I am building a website (here is the link http://www.greekorama.gr) and i'm having an issue with the carousel carousel and the navbar navbar-top-fixed.

If you try to scroll down using the side scroll-bar everything is fine.

But if you try to scroll down using the scroll-button on your mouse, then you will see that the top navbar is flipping.

Try to scroll and you will see what i am talking about.

It is happening on 4 pages. It's in greek language, here are the meanings

1)Αρχική Σελίδα = Home page

2)Παραγωγοί/Προϊόντα= Products/Producers

3)Καταλύματα= Accomodations

4)Επιχειρήσεις=Business

This is happening only on Google Chrome and Opera browsers (on IE,Safari and Firefox everything is ok).

I assume, that is something with the webkit going on. But i can not find out what.

The flipping is happening only bellow the carousel. I mean when you scroll down and carousel is dissapearing behind the navbar, at that moment the navbar is starting flipping.

Bellow is the top-fixed navbar code

<nav id="myNavbar" class="navbar navbar-default navbar-inverse navbar-fixed-top" role="navigation">
        <div class="container">

            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbarCollapse">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a id="a-brand" class="navbar-brand center-block" href="index.php?content=home" style="font-size: 1.3em; font-family:Garamond, Verdana, Helvetica, Geneva, sans-serif;">Δήμος Θεσσαλονίκης</a>
            </div>
            <div class="collapse navbar-collapse" id="navbarCollapse">
                <ul class="nav navbar-nav center-block" id="ul-navmenu">
                    <li><a id="a-navbar" href="index.php?content=home"><span class="glyphicon glyphicon-home"></span> Αρχική Σελίδα</a></li>
                    <li><a id="a-navbar" href="index.php?content=product_search"><span class="glyphicon glyphicon-leaf"></span> Παραγωγοί/Προϊόντα</a></li>
                    <li><a id="a-navbar" href="index.php?content=accom_search"><span class="glyphicon glyphicon-tower"></span> Καταλύματα</a></li>
                    <li><a id="a-navbar" href="index.php?content=business_search"><span class="glyphicon glyphicon-briefcase"></span> Επιχειρήσεις</a></li>
                    <li><a id="a-navbar" href="index.php?content=links"><span class="glyphicon glyphicon-link"></span> Σύνδεσμοι</a></li>
                    <li><a id="a-navbar" href="index.php?content=contact_form"><span class="glyphicon glyphicon-envelope"></span> Επικοινωνία</a></li>

                    <form class="navbar-form navbar-right" role="search" id="search">
                        <div class="form-group">
                            <input type="text" style="font-family:Garamond, Verdana, Helvetica, Geneva, sans-serif;" class="form-control" name="username" placeholder="Αναζήτηση">
                        </div>
                    </form>
                </ul>
            </div>
        </div>
    </nav>

Bellow is the carousel code

<div class="homeCarousel hidden-xs">
    <div id="myCarousel" class="carousel slide" data-interval="3000" data-ride="carousel">

        <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="active item">
                <div class="carousel-caption">
                    <img src="images/thessaloniki1.jpg">
                </div>
            </div>
            <div class="item">
                <div class="carousel-caption">
                    <img src="images/alexander1.jpg">
                </div>
            </div>
            <div class="item">
                <div class="carousel-caption">
                    <img src="images/aristotelous1.jpg">
                </div>
            </div>
        </div>

        <a class="carousel-control left" href="#myCarousel" data-slide="prev">
            <span class="glyphicon glyphicon-chevron-left"></span></a>
        <a class="carousel-control right" href="#myCarousel" data-slide="next">
            <span class="glyphicon glyphicon-chevron-right"></span></a>
    </div>
</div>

Both codes are not in the same file. They are in different files. All 4 carousels (one for every page i told you above) has the same code, the only difference is on image names and the carousel id ("homeCarousel", "prodCarousel" etc etc).

Any help is welcomed. Thanks in advance.

Sounds like a bug, could you please file a bugreport (with a minimal testcase if possible) over on http://crbug.com? — Erik Dahlström, Jan 23 '15 at 15:43

seb · Answer 1 · 2015-03-05T22:31:58.850

I had a similar issue on my page. The bootstrap navbar is placed along with the carousel on top of the page. When scrolling down the navbar gets position:fixed; . To avoid jumping I wrapped a container around my navbar, but noticed some flickering. I could resolve this my adding a higher z-index to the container, just make sure it's higher than the carousel, for example set the container to: position:relative; and z-index: 999;

Here is an example https://jsfiddle.net/2xz4omLj/1/

score 0 · Answer 2 · answered Jan 23 '15 at 20:16

0

I've put twitter bootstrap carousel along with the navbar-fixed-top on many websites and i don't get this error on any. This means that there is a problem inside your source code.

As you already realised it has to do with the carousel. If you delete it from your code, that bug won't appear, I did that with inspect element and the bug don't shows.

So, i think you should look for the problem inside the carousel code that you've placed on your website. The first thing that i see witch i know it is not good is that you've forced your carousel items to get 500px height. This is not a good thing because bootstrap does not work like that. You should use col-xs-12 class along with homeCarousel class, remove the item height and in the same time add the class img-responsive to all your images because they don't have that class currently. Twitter bootstrap is a responsive framework and you don't seem to understand that. Your carousel should contain images with the same size and they should be in a large scale to cover, probably at least 1200px width. So keep in mind, don't force any height, because responsive means that the width will fit and the height will autoset alone. Check again your ==**START**== carousel styles and remove the useless code and try to take advantage of bootstrap functions as they are, don't try to hack them very much because they are well done.

If this does not solve your problem, try to add a jsfiddle and i will edit it to work for you.

answered Jan 23 '15 at 20:16

paulalexandru

9,218
7
66
94

Thanks for the solution, but it doesn't seem to work for me, even though i did what you said. i don't know what i am doing wrong...here is the jsfiddle you asked http://jsfiddle.net/SirZaf/us02wnp0/ and thanks again for your time edit: i deleted the edits i made on the code so you are seeing the same code as it was in the beggining – zaf Jan 26 '15 at 08:10
You have to put a jsfiddle with a working example. You can use pictures from placeholder.it, and we should see the menu blinking. Currently the page is white. – paulalexandru Jan 26 '15 at 08:16
Ok, so in this jsfiddle that you wrote, what is not working well? I don't see any problem in it. – paulalexandru Jan 26 '15 at 09:03
Well, forget the fiddle. Let me tell you what i did on the source code of what you told me above. 1) i deleted from the css the .item element and 2) height property from .carousel .item img .3) I also added the col-xs-12 class to my homecarousel and 4) the img-responsive class to all my images. but it still doesn't work. 5) i deleted completely the homecarousel and the navbar was working fine without flipping. I'm trying to follow the project requirements that's why i need the carousel right bellow the navbar. thanks again for you time – zaf Jan 26 '15 at 09:10
I've placed lots of carousels under the navbar and i dont get any problem. It's about the hacks you do in your carousel code. Try to add a default carousel, without any improvements, just to check if it works like that. – paulalexandru Jan 26 '15 at 09:16

score 0 · Answer 3 · edited May 23 '17 at 11:59

I found my solution here:

Bootstrap 3 Fixed Top Navbar 'Flickering' On Mobile Scrolling using jQuery One-Page Scrolling Effect

It doesn't tell you to which element you should apply the "backface-visibility: hidden". Initially I applied it to all elements, but this prevented the navbar-brand (which fell behind some other part of the navbar in my case) from being clickable. I ended up applying the backface-visibility to .navbar and some of my main containers.

Bootstrap 3 Carousel issues with flipping

3 Answers3