Question

我正在尝试在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像素），但我在页面上缩小它们以显示整个平铺图像。我需要保持其质量，以便用户可以放大它们。

Answer 1

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

解决此问题的一种方法是使用画布元素代替您绘制所有切片，然后转换canvas元素。

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应用于canvas元素。

希望这有帮助。

Answer 2

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

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

2 个答案: