【发布时间】：2013-02-01 23:31:27
【问题描述】：
在 Chrome 中对带有背景图像的元素应用了几次变换后，我看到了奇怪的行为。
我正在尝试构建一个游戏，其背景覆盖整个屏幕，并且在该背景周围移动的缩放角色。角色有多个动画帧，我通过移动背景位置 x 或 y 以类似于常见 CSS 精灵技术的方式来显示每一帧。
问题是我看到角色图像中相邻帧的上边缘或左边缘。现在，这只发生在某些规模上，但它清晰可见且令人分心。出于演示的目的，我使用的是带有两帧的 364x1328 图像。顶部框架包含一个黑框，其 364x664 边界中没有红色。底部框架为纯红色。选择边界的顶部框架显示在左侧的图像编辑器中，Chrome 的输出粘贴在右侧：
在 Chrome 的输出中，您可以清楚地看到底部的红色边框。鉴于我的背景图像包含在 364x664 框中，我希望仅显示该框中可见的像素。换句话说，我想看看我在scale(1) 看到的东西，但是按比例缩小了。 Chrome 似乎出于某种原因对背景图像进行了重新采样。
为了简化演示，我包含了一个 JS Fiddle： 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 填充每一帧（多少才足够？）填充以消除问题，但这似乎非常糟糕，我想要一个真正的答案。
【问题讨论】：
-
我也遇到了同样的问题。这似乎是 Chrome 的错误，因为最新的 Safari 和 Firefox 将图像渲染得非常好，边缘锋利。
标签： css google-chrome background webkit transform