缩放时“位置：相对”的奇怪行为。发生了什么？答案

【问题标题】：Strange behaviour of "position: relative" when zooming. What's happening?缩放时“位置：相对”的奇怪行为。发生了什么？
【发布时间】：2014-01-15 04:01:24
【问题描述】：

小提琴：http://jsfiddle.net/4WFrJ/

我的问题：我无法理解这个设置的行为。当我放大时，图像往往移动得更快，但当我缩小时，它们根本不动。有时他们只是停在 9.xxxxxx，即使我告诉他们只移动一个像素。你能解释一下吗？

我的浏览器是 Chrome。

我的目标：实现流畅的运动，图像在超出父元素范围时消失，无论放大百分比如何。

我正在寻找管理这些奇怪过程的基本规则，我希望从中学习新事物。

守则：

HTML：

<div id = "presentation">
            <ul>
                <li class = "pres-item"> <img class = "pres-image" src = "../img/presentation/image1.jpg"> </li>
                <li class = "pres-item"> <img class = "pres-image" src = "../img/presentation/image2.jpg"> </li>
                <li class = "pres-item"> <img class = "pres-image" src = "../img/presentation/image3.jpg"> </li>
                <li class = "pres-item"> <img class = "pres-image" src = "../img/presentation/image4.jpg"> </li>
            </ul>
        </div>

CSS：

html, body {
    margin: 0;
}

#presentation {
    padding: 10px;
    width: 900px;
    margin: 50px auto;
    overflow: hidden;
}

#presentation ul {
    list-style-type: none;
    margin: 0;
}

#presentation ul li {
    display: inline-block;
}

.pres-item {
    height: 150px;
    width: auto;
    position: relative;
    left: 0;
}
.pres-image {
    width: inherit;
    height: inherit;
}

JS（使用 jQuery）：

$(document).ready(function(){
    var presentation = $('#presentation');
    var interval = setInterval(function() {
        console.log('intervaling');
        $('.pres-item').css('left', '+=1');
    }, 60);

});

图片：

感谢：

感谢大家（提前）

【问题讨论】：

我的浏览器是谷歌浏览器。哦，它只在 chrome 中这样做，不是吗。这比我想象的还要奇怪。
它们在缩小时似乎移动得更慢，但这不是很自然吗？例如，如果它们每“tick”移动 4px，而您缩小到 25%，那么它们似乎只会以每“tick”移动 1px，因为 4 个视口像素被压缩成一个屏幕像素（或者我们可能是只是没有看到相同的效果）。
@DaggNabbit 发布了一张图片：在 90% 缩放时，“左”属性保持在该值。 9.99xxx。它根本不增加。当我告诉它只增加 1 个像素时，我不知道为什么它甚至会获得这种值。顺便说一句，奇怪的是，它在 IE11 之类的浏览器中的工作方式与我预期的一样！
@Rasteril，很奇怪。这个例子不会发生这种情况，是吗？ jsfiddle.net/4WFrJ/1
@DaggNabbit，是的，确实没有！ jQuery，我以为我可以相信你！

标签： javascript jquery html css css-position

【解决方案1】：

<script>

    // too much code, but it explains..

    // do this in ur interval...

    var getCurrent_left = $('.pres-item').css('left');
    var newCurrent_left = getCurrent_left.split['px'];
    var newCurrent_left = parseInt(newCurrent_left[0]) + 1;
    var newCurrent_left = parseInt(newCurrent_left);

    $('.pres-item').css({"left", newCurrent_left});

    // you can use parseFloat(var, 2) for decimal


</script>

【讨论】：

【解决方案2】：

我的问题：

当我放大时，图像往往移动得更快，但当我缩小时，它们根本不动。

我不确定这是否真的是一个问题。它们在缩小时似乎移动得更慢，因为它们在每个视口像素中移动的屏幕像素更少。

有时它们会在 9.xxxxxx 处停止，即使我告诉它们只移动一个像素。你能解释一下吗？

显然 Chrome 并不总是将该 CSS 属性作为整数返回。你可以在这段代码中看到同样的效果：

var presentation = document.getElementById('presentation');
var items = presentation.getElementsByClassName('pres-item');
var interval = setInterval(function () {
    [].forEach.call(items, function (x) {
        var lastLeft = getComputedStyle(x, null).getPropertyValue('left');        
        console.log(lastLeft);
        x.style.left = (parseFloat(lastLeft) + 1) + 'px';
    })
}, 60);

我不确定这是否有问题。您可以通过在单独的变量中跟踪偏移量并在循环期间递增它而不是从元素的当前样式计算它来轻松避免它。

var presentation = $('#presentation');
var left = 0;
var interval = setInterval(function() {
    ++left;
    $('.pres-item').css('left', left + 'px');
}, 60);

【讨论】：