Ich sehe seltsames Verhalten nach dem Anwenden von ein paar Transformationen auf Elemente mit Hintergrundbildern in Chrome.Chrome Hintergrundbild "Bleeds" Kanten mit CSS-Skalierung Transformationen angewendet
Ich versuche ein Spiel mit einem Hintergrund über den gesamten Bildschirm und einem skalierten Charakter, der sich um diesen Hintergrund bewegt. Das Zeichen hat mehrere Animationsrahmen und ich zeige jeden Frame, indem ich die Hintergrundposition x oder y auf ähnliche Weise wie bei herkömmlichen CSS-Sprite-Techniken verschiebe.
Das Problem ist, dass ich die obere Kante oder die linke Kante angrenzender Bilder im Bild meines Charakters sehe. Nun passiert das nur in bestimmten Maßstäben, aber es ist deutlich sichtbar und störend. Für eine Demonstration verwende ich ein 364x1328 Bild mit zwei Frames. Der obere Rahmen enthält eine schwarze Box ohne Rot in den Grenzen 364 x 644. Der untere Rahmen ist fest rot. Der obere Rahmen mit Grenzen ausgewählt ist in meinem Bild-Editor auf der linken Seite und der Ausgabe von Chrome angezeigt wird auf der rechten Seite eingefügt:
In der Ausgabe von Chrome können Sie deutlich sehen, eine rote Grenze entlang der Unterseite. Da mein Hintergrundbild in einem 364x664-Feld enthalten ist, würde ich erwarten, dass nur die in diesem Feld sichtbaren Pixel angezeigt werden. Mit anderen Worten, ich würde gerne sehen, was ich unter scale(1) sehe, aber verkleinert. Es sieht so aus, als würde Chrome das Hintergrundbild aus irgendeinem Grund neu abtasten.
Um einfach zu machen demonstrieren, ich habe eine JS Fiddle enthalten: 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>
Nun, ich bin nicht sicher, ob diese Grafikkarte oder maschinenabhängig in irgendeiner Weise. In der Geige sehen Sie zwei angewendete Skalierungstransformationen. Dies emuliert, was in meinem Spiel passiert. Die erste ist die Skalierung für den Hintergrund und die zweite die Skalierung für das Hauptzeichen.
Ich würde jede Hilfe zu schätzen wissen. Ich habe überlegt, jeden Rahmen mit 50px (wieviel ist genug?) Auffüllen, um das Problem zu beseitigen, aber das scheint schrecklich hacky und ich möchte eine echte Antwort.
Ich habe das gleiche Problem auftritt. Es scheint, Chrome-Bug als neueste Safari und Firefox das Bild völlig in Ordnung, mit scharfen Kanten. – gondo