slideshow - Cycle 2's scrollHorz doesn' t 在全屏图像上顺利工作

Question

我目前在全屏(100％宽度和高度)上使用带有scrollHorz的Cycle2，背景图像的大小为“覆盖”，除此之外，页面上没有回调或其他太多内容，因此它是一个非常基本的 slider .

我发现当浏览器太大时，幻灯片过渡会出现锯齿状，不平滑。不过，当屏幕较小时，效果会更好。我也没有遇到任何“褪色”问题，或者至少根本不明显。

我尝试过各种缓动和速度的组合，但运气不佳。

我不确定它是CSS的问题还是cycle2的问题，而且我无法通过谷歌找到类似的问题，有人可以解释一下吗？

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

这不是周期问题

background-size: cover 的性能很糟糕。

您也可以通过在幻灯片中添加 transform:translate3d(0,0,0) 来缓解一些痛苦，但它仍然会不稳定。

用实际图像替换背景通常会提高我的性能，例如 this fiddle 。不过，图像越大，任何浏览器的性能都会越慢；渲染大型移动图像对他们来说很困难。

然后，这只是图像大小和位置的问题，因为您可以使用以下内容:

.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*/
}

如果您需要支持旧版浏览器，那么您可以通过图像运行例程来调整大小和偏移 like this does .

还有其他解决方案仅适用于某些浏览器(例如 object-fit: cover)，但这些选项应该适用于所有浏览器。