7

在 Chrome 中对带有背景图像的元素应用了几次变换后，我看到了奇怪的行为。

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

问题是我看到角色图像中相邻帧的上边缘或左边缘。现在，这只发生在某些规模上，但它清晰可见且令人分心。出于演示的目的，我使用的是带有两帧的 364x1328 图像。顶部框架包含一个黑框，其 364x664 边界中没有红色。底部框架为纯红色。选择边界的顶部框架显示在左侧的图像编辑器中，Chrome 的输出粘贴在右侧：

左侧的帧边界 (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 填充每一帧（多少才足够？）填充以消除问题，但这似乎非常糟糕，我想要一个真正的答案。

4

1 回答 1

1

似乎是因为 CSS 转换可以在子像素位置进行插值，所以如果您的 element 的位置不适合像素，您会看到“dubstep 效果”（请参阅​​ http://paulirish.com/2012/why-moving-带有翻译的元素比 posabs-topleft/ 更好）。

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

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

编辑：-webkit-backface-visibility: hidden;在 Chromium 上做伎俩，不知道为什么......

于 2013-02-17T13:50:20.113 回答