Cycle2 scrollHorz not working smoothly on full screen images

Question

I am currently using Cycle2 with scrollHorz in full screen (100% width and height) with background images sized to cover, in addition, there are no callbacks or anything else on the page, which is why its main slider.

I find that when the browser is too large, the slide transition seems jagged, not smooth. However, it is slightly better when the screen is smaller. I also do not experience any problems with "fade", or at least it is not noticeable at all.

I tried with a different combination of easing and speed, but didn't have much luck.

I'm not sure if this is a css thing or a cycle2 thing, and I cannot find a similar problem using google, can someone shed some light on 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; } } 

Answer 1

This is not a loop problem.

background-size: cover has terrible performance.

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

Replacing the background with the actual image usually increases performance for me, like this script . Although, the larger the image, the slower the performance will be in any browser; rendering large moving images is difficult for them.

Then it's just a matter of calibrating and positioning the images, for which you can 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 run a routine through images for size and offset as it does .

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