Chrome背景图像使用CSS缩放变换的“Bleeds”边缘

在Chrome中将几个变换应用于具有背景图像的元素后，我看到了一些奇怪的行为。Chrome背景图像使用CSS缩放变换的“Bleeds”边缘

我正在尝试在整个屏幕上构建一个背景，并在该背景上移动的缩放字符。该角色具有多个动画帧，我通过以与常见CSS Spriting技术类似的方式移动背景位置x或y来显示每个帧。

问题是我看到了角色图像中相邻帧的上边缘或左边缘。现在，这只发生在一定的尺度上，但它清晰可见并分散注意力。为了演示的目的，我使用了两帧的364x1328图像。顶部框架包含一个在364x664边界内没有红色的黑盒子。底部框架呈红色。与边界顶部框架选择在左边，透过Chrome输出我的图像编辑器显示粘贴在合适的：

Frame boundaries on the left (364x664), output from Chrome on the right

在Chrome的输出，你可以清楚地看到沿着红色边框底部。鉴于我的背景图像包含在一个364x664框中，我希望只显示该框中可见的像素。换句话说，我希望看到我在scale(1)看到的内容，但缩小了比例。 Chrome似乎无论出于何种原因都重新采样背景图片。

为了证明简单，我已经包含了JS小提琴： http://jsfiddle.net/CL5Gh/

<!DOCTYPE html> 
<html> 
<head> 
<style> 

#b 
{ 
    -webkit-transform: scale(0.4775); 
    -webkit-transform-origin: 0 0; 
} 

#d 
{ 
    height: 664px; 
    width: 364px; 
    background-image: url(data:image/png,%89PNG%0D%0A%1A%0A%00%00%00%0DIHDR%00%00%01l%00%00%050%02%03%00%00%00%1A%F2%87%B5%00%00%00%2CtEXtCreation%20Time%00Sun%2017%20Feb%202013%2022%3A08%3A49%20%2B1000%FC%E8%C07%00%00%00%07tIME%07%DD%02%11%0B%1B%0B%C2%A0%3B8%00%00%00%09pHYs%00%00%1E%C1%00%00%1E%C1%01%C3iTS%00%00%00%04gAMA%00%00%B1%8F%0B%FCa%05%00%00%00%09PLTE%00%00%00%00%00%00%FF%00%00%3D%FB%DD-%00%00%00%01tRNS%00%40%E6%D8f%00%00%01%A4IDATx%DA%ED%CC1%0D%000%08%000%9EI%C4%24*11%C8%92%B5%02%1A%01%00%00%00%00%00%FC%E4%E45n%B7%DB%EDv%BB%DDn%B7%DB%EDv%BB%DDn%B7%DB%EDv%BB%DDn%B7%DB%EDv%BB%DDn%B7%DB%EDv%BB%DDn%B7%DB%EDv%BB%DDn%B7%DB%EDv%BB%DDn%B7%DB%EDv%BB%DDn%B7%DB%EDv%BB%DDn%B7%DB%EDv%BB%DDn%B7%DB%EDv%BB%DDn%B7%DB%EDv%BB%DDn%B7%DB%EDv%BB%DDn%B7%DB%EDv%BB%DDn%B7%DB%EDv%BB%DDn%B7%DB%EDv%BB%DDn%B7%DB%EDv%BB%DDn%B7%DB%EDv%BB%DDn%B7%DB%EDv%BB%DDn%B7%DB%EDv%BB%DDn%B7%DB%EDv%BB%DDn%B7%DB%EDv%BB%DDn%B7%DB%EDv%BB%DDn%B7%DB%ED%06%00%00%00%00%00%DESs%DCn%B7%DB%EDv%BB%DDn%B7%DB%EDv%BB%DDn%B7%DB%EDv%BB%DDn%B7%DB%EDv%BB%DDn%B7%DB%EDv%BB%DDn%B7%DB%EDv%BB%DDn%B7%DB%EDv%BB%DDn%B7%DB%EDv%BB%DDn%B7%DB%EDv%BB%DDn%B7%DB%EDv%BB%DDn%B7%DB%EDv%BB%DDn%B7%DB%EDv%BB%DDn%B7%DB%EDv%BB%DDn%B7%DB%EDv%BB%DDn%B7%DB%EDv%BB%DDn%B7%DB%EDv%BB%DDn%B7%DB%EDv%BB%DDn%B7%DB%EDv%BB%DDn%B7%DB%EDv%BB%DDn%B7%DB%EDv%BB%DDn%B7%DB%EDv%BB%DDn%B7%DB%EDv%BB%DDn%B7%DB%EDv%BB%DDn%B7%DB%EDv%BB%DDn%B7%DB%EDv%BB%DDn%B7%DB%EDv%BB%DDn%B7%DB%EDv%BB%DDn%B7%DB%EDv%BB%DDn%B7%DB%EDv%BB%DDn%B7%7B%F3n%80%3C%CA%A7%B6%23%99%BC%00%00%00%00IEND%AEB%60%82); 
    -webkit-transform: scale(0.4375); 
} 

</style> 
</head> 
<body> 
    <div id="b"> 
    <div id="d"> 
    </div> 
    </div> 
</body> 
</html>

现在，我不知道这是否是视频卡或机依赖以某种方式。在小提琴中，您会看到应用了两个缩放转换。这是模拟我的游戏中发生的事情。第一个是背景的缩放比例，第二个是主角的缩放比例。

我将不胜感激任何帮助。我已经考虑用50px填充每一帧（多少就足够了？）填充来消除这个问题，但是这看起来非常黑客，我想要一个真正的答案。

来源

2013-02-17 Benjamin Penney

我遇到同样的问题。它似乎是Chrome的bug，因为最新的Safari和Firefox使得图像完美无瑕，并具有尖锐的优势。 – gondo 2014-04-18 14:15:09

看起来这是因为CSS转换可以插入子像素位置，所以如果你的元素的位置不适合像素，你会看到一个“dubstep效果”（见http://paulirish.com/2012/why-moving-elements-with-translate-is-better-than-posabs-topleft/）。

由于scale不能用CSS2模拟（与文章中的translate不同），恐怕没有解决方法。

除非特定的CSS3规则确实存在，否则我正在寻找它。

编辑：-webkit-backface-visibility: hidden;做铬的把戏，不知道为什么......

来源

2013-02-17 13:50:20 MatTheCat

谢谢！尽管它以某种方式改变了调整大小的算法，但它起作用。边缘看起来不那么光滑，我不知道为什么。 – 2013-02-17 22:14:49

哎呀，我想我说得太快了。尽管这样会使图像更清晰，但仍有一些情况下我会从框架外部流血。我认为我真正追求的是模仿-moz-image-rect来切片图像的东西。 – 2013-02-18 09:28:50

Chrome背景图像使用CSS缩放变换的“Bleeds”边缘

回答

相关问题