Cycle2's scrollHorz doesn't work smoothly on fullscreen images

Question

I'm currently using Cycle2 with scrollHorz on full screen (100% width and height) with background images with their size to 'cover', besides that there are no callbacks or much else on the page so its a very basic slider.

I find that when the browser is too big, the slide transition appears jagged, not smooth. However its somewhat better when the screen is smaller. I also do not experience any issues with 'fade', or at least its not noticeable at all.

I have tried with various combination of easing and speed, but haven't had much luck.

I'm not sure if its a css thing or a cycle2 thing, and I'm unable to find a similar issue via google, can someone please shed some light to this?

HTML

<ul id="homepage-carousel" class="hero">
    <li class="homepage-carousel-item" style="background-image: url('hero1.jpg');">
        <div class="homepage-carousel-info">
            <h1 class="homepage-carousel-title">Title</h1>              
            <h2 class="homepage-carousel-subtitle">Subtitle</h2>                
            <div class="homepage-carousel-desc">
                <p>some info here</p>
            </div>                                  
            <div class="homepage-carousel-link"><a class="homepage-carousel-url" href="#" title=""><span>Read More</span></a></div> 
        </div>
    </li>
    <li class="homepage-carousel-item" style="background-image: url('hero2.jpg');">
        <div class="homepage-carousel-info">
            <h1 class="homepage-carousel-title">Title</h1>              
            <h2 class="homepage-carousel-subtitle">Subtitle</h2>                
            <div class="homepage-carousel-desc">
                <p>some info here</p>
            </div>                                  
            <div class="homepage-carousel-link"><a class="homepage-carousel-url" href="#" title=""><span>Read More</span></a></div> 
        </div>
    </li>
    <li class="homepage-carousel-item" style="background-image: url('hero3.jpg');">
        <div class="homepage-carousel-info">
            <h1 class="homepage-carousel-title">Title</h1>              
            <h2 class="homepage-carousel-subtitle">Subtitle</h2>                
            <div class="homepage-carousel-desc">
                <p>some info here</p>
            </div>                                  
            <div class="homepage-carousel-link"><a class="homepage-carousel-url" href="#" title=""><span>Read More</span></a></div> 
        </div>
    </li>
</ul>

CSS

#homepage-carousel {
    width: 100%;
    height: 100%;

    .homepage-carousel-item {
        height: 100%;
        background-repeat: none;
        background-position: top center;
        background-size: cover;
    }
}

score 0 · Answer 1 · edited May 23 '17 at 12:12

This isn't a cycle issue

background-size: cover just has horrible performance.

You can ease the pain some by adding transform: translate3d(0,0,0) to the slides as well, but it will still be choppy.

Replacing the background with an actual image normally increases the performance for me, like this fiddle. Though, the larger the image is the slower the performance will be in any browser; rendering large moving images is hard for them.

Then it's just a matter of sizing and positioning the images, for that you could use something like:

.homepage-carousel-item > img, .homepage-carousel-info { position:absolute; }
.homepage-carousel-item > img {
    /*img size*/
    min-width:100%;
    min-height:100%;
    width:auto;
    height:auto;
    /*img pos*/
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);/*offset position based on img size*/
}

If you need to support legacy browsers, then you would run a routine through the images to size and offset like this does.

There are other solutions that only work in certain browsers (like object-fit: cover), but these options should work in all browsers.

Cycle2's scrollHorz doesn't work smoothly on fullscreen images

1 Answers1