Bootstrap 3 Carousel issues with flipping - google-chrome

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.

Answer 1

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/

Answer 2

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.

Answer 3

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.