Chrome で背景画像を持つ要素にいくつかの変換を適用した後、奇妙な動作が見られます。
画面全体に背景があり、その背景を移動するスケーリングされたキャラクターを持つゲームを構築しようとしています。キャラクターにはアニメーションの複数のフレームがあり、一般的な CSS スプライト技術と同様の方法で背景位置 x または y をシフトすることで、各フレームを表示しています。
問題は、キャラクターの画像に隣接するフレームの上端または左端が表示されることです。現在、これは特定の縮尺でのみ発生しますが、はっきりと見えて気が散ります。デモンストレーションの目的で、2 つのフレームを持つ 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>
これがビデオ カードなのかマシンに依存するのかはわかりません。フィドルでは、2 つのスケール変換が適用されていることがわかります。これは、私のゲームで起こっていることをエミュレートしています。1 つ目は背景のスケーリングで、2 つ目はメイン キャラクターのスケーリングです。
助けていただければ幸いです。この問題を解決するために、各フレームに 50px のパディング (どれくらいあれば十分ですか?) をパディングすることを検討しましたが、それは非常にハックなようで、本当の答えが欲しいです。