Question

我在Chrome中看到一些奇怪的行为，我正在编写一些图像“缩放/平移”代码。我只在Chrome中看到此问题，因为看起来其他浏览器无法渲染高质量的.jpg图像。

当我点击并拖动它时，我正在使用javascript和绝对定位（顶部/左侧）在屏幕上移动和图像。在我的完整项目中，我有一个容器div占屏幕的百分比，然后另一个div包含一个大的img（4200x4200px）。在Chrome中，响应非常“缓慢”，这取决于我如何“放大”到我的图像。我写了一些简化的测试来向你们展示我正在谈论的内容。

请在全屏模式下以1920x1080或更高分辨率运行示例。这是一些平移代码，其中我的div容器小于我的图像idv（调整大小为800x800px）。 Test 1 请注意，如果图像填满div的高度，则平移性能非常差。如果图像的所示部分没有占据div的整个高度，则它相当平滑。

接下来是相同的代码，唯一的变化是div容器设置为比img div（801px）多1个像素。现在，图像平移总是很平滑。 Test 2

我有更多测试，但堆栈溢出限制了我两个链接。这是pan处理程序 function boardPanHandler2（event）{ var newLeft; var newTop;

    if (gBoardMouseDownFlag) {

            newLeft = gBoardPanLeftStart + event.pageX - gBoardPanPageXStart;


            newTop = gBoardPanTopStart + event.pageY - gBoardPanPageYStart;


            $(".div-board").css('left', newLeft).css('top', newTop);
            //$(".div-board").css('transform', 'translate(' + newLeft + 'px, ' + newTop + 'px)');
    }

    $("h1").text($(".div-board").width() + "," + $(".div-board").height() + " " + gBoardContainerX + "," + gBoardContainerY);
}

我对html / css / javascript一般都是新手，所以对我来说很容易。任何见解都会很棒！

Answer 1

将-webkit-backface-visibility: hidden;添加到您的.img-board以及需要拖动的任何其他大图片。

.img-board
{
    position:absolute;
    width:100%;
    height:100%;
    -webkit-backface-visibility: hidden;
}

http://jsfiddle.net/WtjT5/34/

重新“在Chrome中调整后的图像质量停止看起来非常好”

撤消我提出的第一个建议，添加一个新的css类

.noantialias{
    -webkit-backface-visibility: hidden;
}

并在拖放时添加和删除。当我们知道事件

时，我已经更新了你的小提琴

$(event.target).addClass('noantialias');

并且因为mouseup（release）被绑定到窗口，只需在触发时删除所有

$('.noantialias').removeClass('noantialias');

http://jsfiddle.net/WtjT5/41/

CSS / Javascript非常大的图像绝对定位减速

1 个答案: