Positioning issue in chrome with fixed positioned flexslider and sticky navigation

Question

I have a web page with fixed positioned flexslider. I use following code to make flexslider fixed position and to add the slider as the background.

.flexslider {
    display: block;
    position: fixed;
    left: 0;
    top: 0;
    overflow: hidden;
    height: 100%;
    width: 100%;
    z-index: -1;
    border: none;
 }

and the webpage has a sticky navigation which becomes fixed positioned when the user scroll to top height of half of the the viewport height. I did this by using following jQuery and CSS:

jQuery:

   $(window).scroll(function() {
    var scrollTop = $(window).height()/2;
    if ($(window).scrollTop() >= scrollTop) {
        $('.main-header').removeClass('main-header ').addClass('fixed-header');

    }
    if ($(window).scrollTop() < scrollTop) {
        $('.fixed-header').removeClass('fixed-header').addClass('main-header ');
    }
}) 

CSS:

.fixed-header {
    position: fixed;
    top: 0;
    left: 0;
}

and my html markup is:

   <div class="flexslider">
        <ul class="slides">
            <li>
                <img src="images/image1.jpg" />
            </li>
            <li>
                <img src="images/image2.jpg" />
            </li>
            <li>
                <img src="images/image3.jpg" />
            </li>
        </ul>
    </div>


   <header class="main-header">
                        <h1>heading</h1>
                        <p>
                            paragraph
                        </p>
                        <nav class="site-navigation">
                            <ul>
                                <li>
                                    <a class="active" href="#slide1">home</a>
                                </li>
                                <li>
                                    <a href="#slide2">about</a>
                                </li>
                                <li>
                                    <a href="#slide3">services</a>
                                </li>
                                <li>
                                    <a href="#slide4">contact</a>
                                </li>
                                <li>
                                    <a href="#slide5">elements</a>
                                </li>
                            </ul>
                        </nav>
                    </header>

The issue is the navigation does not become fixed and it goes up when it scroll in chrome. If I change the fixed position of flexslider it works fine. This code work perfectly in all the major browsers except Chrome.

How to fix this issue and Is there another way to design a sticky navigation?

Answer 1

I found a solution for my question. If someone facing the same issue as me you can fix this by removing the styling rule

 -webkit-backface-visibility: hidden 

of flexslider.css.

you can find the answer by visiting here https://github.com/woothemes/FlexSlider/issues/179