铬背景图像“；流血“；应用CSS缩放变换的边_Css_Google Chrome_Background_Webkit_Transform

铬背景图像“；流血“；应用CSS缩放变换的边

css google-chrome

铬背景图像“；流血“；应用CSS缩放变换的边,css,google-chrome,background,webkit,transform,Css,Google Chrome,Background,Webkit,Transform,在Chrome中对背景图像元素应用了一些变换后，我看到了奇怪的行为我正在尝试构建一个游戏，在整个屏幕上有一个背景，并有一个缩放的角色在背景周围移动。这个角色有多个动画帧，我通过移动背景位置x或y来显示每个帧，这种方式与常见的CSS spriting技术类似问题是我在角色的图像中看到了相邻帧的上边缘或左边缘。现在，这只会在一定的范围内发生，但它是清晰可见和分散注意力的。为了演示的目的，我使用了一个带有两帧的364x1328图像。顶部框架包含一个黑框，其364x664边界中没有红色。底部框架为纯

在Chrome中对背景图像元素应用了一些变换后，我看到了奇怪的行为

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

问题是我在角色的图像中看到了相邻帧的上边缘或左边缘。现在，这只会在一定的范围内发生，但它是清晰可见和分散注意力的。为了演示的目的，我使用了一个带有两帧的364x1328图像。顶部框架包含一个黑框，其364x664边界中没有红色。底部框架为纯红色。选定边界的顶部框架显示在左侧的“我的图像编辑器”中，Chrome的输出粘贴在右侧：

在Chrome的输出中，您可以清楚地看到底部的红色边框。考虑到我的背景图像包含在364x664框中，我希望该框中只显示可见像素。换句话说，我希望看到我在缩放（1）时看到的东西，但是缩小了。Chrome似乎出于某种原因正在对背景图像重新采样

为了简化演示，我加入了一个JS提琴：


#b
{
-webkit变换：比例（0.4775）；
-webkit转换原点：0；
}
#d
{
高度：664px；
宽度：364px；
背景图片：url数据：图像/PNPNG，89PNG，0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0%00%B1%8F%0B%FCa%05%00%00%00%09PLTE%00%00%00%00%00%00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00%00 00%00%00%00 00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%V%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%词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词%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%词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词词BB%DDn%B7%DB%EDv%BB%DDn%B7%DB%EDv%BB%DDn%B7%DB%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%00%00IEND%AEB%60%82）；
-webkit变换：比例（0.4375）；
}

现在，我不确定这是否在某种程度上依赖于视频卡或机器。在小提琴中，你会看到两个缩放变换的应用。这是在模拟我的游戏中发生的事情。第一个是背景的缩放，第二个是主角的缩放

我非常感谢您的帮助。我曾考虑过用50px（多少才足够？）填充每个帧来消除这个问题，但这似乎非常粗糙，我想要一个真正的答案。

这似乎是因为CSS变换可以在亚像素位置插值，所以如果元素的位置不适合像素，您会看到“步进效应”（见）

由于CSS2无法模拟

scale

（与本文中的

translate

不同），因此恐怕没有解决方案

除非特定的CSS3规则确实存在或将存在，否则我正在搜索它

编辑：

-webkit背面可见性：隐藏；

对铬进行处理，不知道为什么…

谢谢！虽然它在某种程度上改变了大小调整算法，但效果很好。边缘看起来不太平滑，我也不知道为什么。哎呀，我想我说得太快了。虽然这会使图像更清晰，但仍有一些情况下我得到了b从画面外看。我想我真正想要的是模仿moz image rect来分割图像。我遇到了同样的问题。这似乎是Chrome的错误，因为最新的Safari和Firefox将图像渲染得非常好，边缘锐利。

<!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>