在 Mac 上的 Safari 中缩放平铺图像时闪烁的接缝答案

【问题标题】：Flickering seams when scaling tiled images in Safari on the Mac在 Mac 上的 Safari 中缩放平铺图像时闪烁的接缝
【发布时间】：2014-03-16 02:45:42
【问题描述】：

我正在尝试在 Safari 中缩放一堆平铺图像。 iOS 上的 Safari 可以正确显示。但是，在 Mac 上，缩放时图像之间会出现一些奇怪的闪烁。动画停止后，图块之间也会出现透明线。

我制作了一支笔来显示行为：http://cdpn.io/gdcxD

我读过很多建议我使用 -webkit-backface-visibility: hidden 或其他一些深奥的 webkit 指令的东西。我已经尝试了其中的几个，但它们没有任何区别。

最终，它将在 iBooks Author 小部件中使用，因此它需要在 iOS 和 Mac 上都可以工作。

我真的不关心这个问题是如何解决的，除了一件事：我需要在图像上保留-webkit-transform: translateZ(0)，以便它们在 iOS 上正确显示。

有什么想法吗？

编辑：我正在制作的 iBooks Author Widget 将允许用户放大平铺图像。我使用的图像很大（1500 x 1200 像素），但我在页面上将它们缩小以显示整个平铺图像。我需要保持它们的质量，以便用户可以放大它们。

【问题讨论】：

标签： macos css safari css-transitions

【解决方案1】：

尝试使用 position:relative;在 img 元素上。

【讨论】：

不幸的是，添加position: relative后闪烁仍然存在。

【解决方案2】：

这可能是由于浏览器在缩放图像时使用了本机系统图形处理，例如抗锯齿。在 Mac 上，图像的边缘似乎没有正确消除锯齿，在某些尺寸下会在边缘留下透明（消除锯齿）像素。

解决此问题的一种方法是改用画布元素，将所有图块绘制到该元素上，然后转换画布元素。

var canvas = document.createElement('canvas'),
    ctx = canvas.getContext('2d'),
    tileW = 100,
    tileH = 100,
    cols = 10,
    rows = 10,
    x, y;

canvas.width = tileW * cols;
canvas.height = tileH * rows;

for(y = 0; y < rows; y++) {
    for(x = 0; x < cols; y++) {
         /// use spritesheet of image array here... just for example
         ctx.drawImage(spriteSheet, srcX, srcY, tileW, tileH,  // use position for x/y in spritesheet here instead (or 0,0 if image array)
                                    x * tileW, y * tileH, tileW, tileH);
    }
}

parentElement.appendChild(canavas);

现在将 CSS 应用到画布元素。

希望这会有所帮助。

【讨论】：

感谢您的回答！当我将所有图像插入画布时，闪烁确实消失了。但是，在缩放画布时，我会失去图像的质量。关于在缩放整个事物时如何保持图像质量的任何想法？（我更新了我的问题以描述我为什么要缩放图像）
@agregoire 啊.. 你可能需要更深入地介绍这个概念，例如为平铺图像引入某种 mipmapping。您始终可以单独使用画布重绘所有内容，以便画布成为图块的静态视口。性能很好。您可以重新绘制具有缩放位置和目标大小的图块。这将像使用变换一样插入图像。
这就是我最终采用的解决方案。我正在画布元素中自己实现缩放。仍然有一些粗糙的边缘，但我正在到达那里。谢谢。