carouFredSel Slider - prevent scroll to top on slides rolling

Question

I'm trying to figure out the solution for this issue. Whenever the carousel slides moves or slides on rolling, page scroll to top of the screen.

Reference Site: http://www.resmed.com/uk/en/index.html

How to replicate: scroll down to half of the banner slider and make sure carousel slide banner is visible to you

Answer 1

I have been searching for the same answer for a while as well. It seems to be a bug introduced in Chrome 57 for fade effects on the caroufredsel.js.

I am not 100% why this works but I have managed to get a fix anyway.

I have basically created a div inside the carousel wrapper which overlays the whole slideshow. This then stops it from jumping to the top of the screen again.

Hope this solves your problem. :)

.chrome-fix {
    position:absolute;
    width:100%;
    height:100%;
}

            <div class="caroufredsel_wrapper">
                <div class="chrome-fix"></div>
                <ul id="foo2">
                    <li>
                        <img src="/img.jpg" alt="" />
                    </li>
                    <li>
                        <img src="/img2.jpg" alt="" />
                    </li>
                    <li>
                        <img src="/img3.jpg" alt="" />
                    </li>
                    <li>
                        <img src="/img4.jpg" alt="" />
                    </li>
                </ul>
            </div>