Sly滑块滚动时图片抖动问题的成因与修复咨询

数据老陈

2026-7-15

Sly滑块滚动时图片抖动/边缘异常的问题

我使用常规Sly滑块，每个滑块项包含图片和描述，功能看似正常，但滚动时图片会轻微抖动，仅在滚动结束后恢复正常。按住鼠标左键向左拖动未滚动的滑块后松开，能更清晰看到问题——图片边缘仿佛出现类似边框的效果。

问题成因

这个问题源于CSS像素对齐与Sly动画的小数偏移冲突：

Sly滑块在滚动动画过程中，会通过设置元素的left/transform属性实现位移，动画过程中易产生非整数像素值（如123.4px）
浏览器对非整数像素的位图元素（如图片）会启用亚像素渲染，导致图片出现模糊、抖动，甚至因背景色透出产生类似边框的视觉效果
滑块项宽度为整数（700px），但结合Sly的弹性边界、缓动动画，滚动过程中很容易出现非整数偏移

修复方案

方案1：给图片添加像素对齐CSS属性

强制图片渲染时对齐像素网格，避免亚像素偏移：

.slider .frame.horizontal ul li img {
    width: 700px;
    border-radius: 10px 10px 0 0;
    /* 添加以下属性 */
    image-rendering: crisp-edges;
    transform: translateZ(0);
    will-change: transform;
}

image-rendering: crisp-edges：强制图片保持像素清晰，避免亚像素模糊
transform: translateZ(0)：触发GPU加速，让浏览器用更精准的方式处理位移
will-change: transform：提前告知浏览器元素将有transform变化，优化渲染性能

方案2：调整Sly动画参数，减少非整数偏移

修改Sly配置中的速度与缓动方式，让动画更平缓：

_self.sly = new Sly(_self.frame, {
    // ...其他配置
    speed: 1000, // 降低速度，减少快速位移带来的亚像素问题
    easing: 'linear', // 改用线性缓动，避免缓动曲线带来的频繁小数偏移
    // ...其他配置
}).init();

方案3：给滑块容器添加整数宽度约束

确保容器和内部元素尺寸均为整数，避免布局计算产生小数：

.frame.horizontal {
    overflow: hidden;
    padding: 30px;
    /* 减去左右padding，确保总宽度为整数 */
    width: calc(100% - 60px);
}

修复后的完整代码

JavaScript

let commonSly = {
    onChange: function (eventName, sly) {
        let duration = eventName !== 'load' ? 400 : 0,
            $prevElms = $(sly.options.prevPage).add(sly.options.prev),
            $nextElms = $(sly.options.nextPage).add(sly.options.next);

        if (sly.pos.dest <= sly.pos.start) {
            $prevElms.fadeOut(duration);
        } else {
            $prevElms.fadeIn(duration);
        }

        if (sly.pos.dest >= sly.pos.end) {
            $nextElms.fadeOut(duration);
        } else {
            $nextElms.fadeIn(duration);
        }
    }
};

let slider = {
    frame: null,
    wrap: null,
    sly: null,
    init: function () {
        let _self = this;
        _self.frame = $('#slider .frame');
        _self.wrap = _self.frame.parent();

        _self.initSly();
        $(window).resize(function () {
            _self.resize();
        })
        _self.resize();
    },
    resize: function () {
        let _self = this;
        _self.sly.reload();
    },
    initSly: function () {
        let _self = this;
        _self.sly = new Sly(_self.frame, {
            horizontal: 1,
            itemNav: 'basic',
            smart: 1,
            activateOn: 'click',
            mouseDragging: 1,
            touchDragging: 1,
            releaseSwing: 1,
            startAt: 0,
            speed: 1000,
            elasticBounds: 1,
            easing: 'linear',
            dragHandle: 1,
            dynamicHandle: 1,
            clickBar: 1,

            // Cycling
            cycleBy: 'items',
            cycleInterval: 2000,
            pauseOnHover: 1,
        }).init();
    },
}

slider.init();

CSS

body {background:#313844}

.frame.horizontal {
    overflow: hidden;
    padding: 30px;
    width: calc(100% - 60px);
}
 .frame.horizontal ul {
    list-style:none;
    margin:0 0 10px;
    padding:0;
    height:100%;
    display:flex;
    flex-direction:row;
    overflow:hidden;
    position:relative;
}
 .frame.horizontal ul li {
    width:480px;
    display:block;
    margin:0 0 0 20px;
    padding:0 0 15px;
    list-style:none;
    text-align:left;
    background:white;
    border-radius:10px;
    position:relative;
}
 .frame.horizontal ul li:before {
    display:none;
}
 .frame.horizontal ul li:first-child {
    margin:0;
}
 .slider .frame.horizontal ul li {
    width:700px;
    background:white;
    color:purple;
}
 .slider .frame.horizontal ul li img {
    width:700px;
    border-radius:10px 10px 0 0;
    image-rendering: crisp-edges;
    transform: translateZ(0);
    will-change: transform;
}
 .slider .frame.horizontal ul li .title {
    padding:10px;
    font-size:18px;
}
 .slider .frame.horizontal ul li .description {
    padding:10px;
    font-size:14px;
}

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.13.2/themes/base/jquery-ui.min.css" integrity="sha512-ELV+xyi8IhEApPS/pSj66+Jiw+sOT1Mqkzlh8ExXihe4zfqbWkxPRi8wptXIO9g73FSlhmquFlUOuMSoXz5IRw==" crossorigin="anonymous" referrerpolicy="no-referrer" />

<div class="slider" id="slider">
    <div class="week-wrap">
        <div class="frame horizontal">
            <ul class="clearfix">
                <li class="it">
                    <img src="https://i.imgur.com/iw0ePEB.jpg">
                    <div class="about">
                        <div class="title">Lorem Ipsum</div>
                        <div class="description">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</div>
                    </div>
                </li>
                <li class="it">
                    <img src="https://i.imgur.com/2Jd50CJ.jpg">
                    <div class="about">
                        <div class="title">Why do we use it?</div>
                        <div class="description">It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.</div>
                    </div>
                </li>
                <li class="it">
                    <img src="https://i.imgur.com/27i1TSY.jpg">
                    <div class="about">
                        <div class="title">Where can I get some?</div>
                        <div class="description">There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable.</div>
                    </div>
                </li>
                <li class="it">
                    <img src="https://i.imgur.com/iw0ePEB.jpg">
                    <div class="about">
                        <div class="title">Lorem Ipsum</div>
                        <div class="description">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</div>
                    </div>
                </li>
                <li class="it">
                    <img src="https://i.imgur.com/2Jd50CJ.jpg">
                    <div class="about">
                        <div class="title">Why do we use it?</div>
                        <div class="description">It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.</div>
                    </div>
                </li>
                <li class="it">
                    <img src="https://i.imgur.com/27i1TSY.jpg">
                    <div class="about">
                        <div class="title">Where can I get some?</div>
                        <div class="description">There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable.</div>
                    </div>
                </li>
            </ul>
        </div>
    </div>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/Sly/1.2.3/sly.min.js" integrity="sha512-ao6nZ/r3l684RKdI0PxtTYwggjMa0IrnO9A+Ay/Eu64CtdZnqKQJGfqap5wtR9xI9uTWcK637llWj0+PkGRBog==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.4.1/jquery.easing.js" integrity="sha512-xq+0+dRhI6SZOh+lDnMJEju2p2YPINflJLcYrRAsIMaXnJi6/V3lppCMCYsB2MLeF2E93r+fVo0MioY90pNzpw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

内容的提问来源于stack exchange，提问作者Hector

Sly滑块滚动时图片抖动问题的成因与修复咨询

问题成因 #

修复方案 #

方案1：给图片添加像素对齐CSS属性 #

方案2：调整Sly动画参数，减少非整数偏移 #

方案3：给滑块容器添加整数宽度约束 #

修复后的完整代码 #

JavaScript #

CSS #

HTML #