应用CSS缩放变换的Chrome背景图像"出血"边缘
Ben*_*ney 7 css webkit background google-chrome transform
在Chrome中使用背景图像对元素进行几次变换后,我看到了奇怪的行为.
我正在尝试在整个屏幕上构建一个具有背景的游戏,以及在该背景周围移动的缩放角色.角色有多个动画帧,我通过以与常见CSS精灵技术类似的方式移动背景位置x或y来显示每个帧.
问题是我在角色的图像中看到了相邻帧的上边缘或左边缘.现在,这只发生在某些尺度上,但它清晰可见并且分散注意力.出于演示的目的,我使用的是具有两个帧的364x1328图像.顶部框架包含一个黑色框,其364x664边界没有红色.底部框架为纯红色.选中边框的顶部框架显示在左侧的图像编辑器中,Chrome的输出粘贴在右侧:
在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填充每个帧(多少就足够了？)填充以消除问题,但这看起来非常hacky我想要一个真正的答案.
这似乎是因为 CSS 转换可以在子像素位置进行插值，因此如果您的元素位置不适合像素，您会看到“dubstep 效果”（请参阅 http://paulirish.com/2012/why-moving- elements-with-translate-is-better-than-posabs-topleft/）。
由于scale无法用 CSS2 模拟（与translate文章中不同），恐怕没有解决方案。
除非特定的 CSS3 规则确实存在或将存在，否则我会寻找它。
编辑：-webkit-backface-visibility: hidden;在 Chromium 上做点什么，不知道为什么......
| 归档时间： |
|
| 查看次数： |
1562 次 |
| 最近记录： |