Widzę dziwne zachowanie po zastosowaniu kilku przekształceń elementów zawierających obrazy tła w przeglądarce Chrome.Obraz tła Chrome "Bleeds" Krawędzie z transformacją skali CSS Zastosowane
Próbuję zbudować grę z tłem na całym ekranie i skalowaną postacią, która porusza się po tym tle. Postać ma wiele klatek animacji i pokazuję każdą ramkę przesuwając pozycję x lub y w tle w podobny sposób do popularnych technik sprinterowania CSS.
Problem polega na tym, że widzę górną krawędź lub lewą krawędź sąsiednich klatek na obrazie mojej postaci. Teraz dzieje się to tylko w pewnych skalach, ale jest wyraźnie widoczne i rozprasza. Do celów demonstracyjnych używam obrazu o rozmiarze 364x1328 z dwiema ramkami. Górna ramka zawiera czarne pudełko bez czerwieni w granicach 364x664. Dolna ramka jest solidnie czerwona. Górna ramka z granicami wybrany jest pokazany w moim edytorze zdjęć po lewej i po wyjściu z Chrome jest wklejany po prawej:
na wyjściu z Chrome, można wyraźnie zobaczyć czerwoną granicę w Dolny. Biorąc pod uwagę, że mój obraz tła jest zawarty w pudełku 364x664, oczekuję, że będą widoczne tylko piksele widoczne w tym polu. Innymi słowy, chciałbym zobaczyć, co widzę w scale(1), ale pomniejszyć. Wygląda na to, że Chrome z jakiegoś powodu zmienia resampling obrazu tła.
Aby demonstrując proste, podaję 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>
Teraz nie jestem pewien, czy to karta graficzna lub maszyna zależny w jakiś sposób. W skrzypcach zobaczysz dwie transformacje skali. To emuluje to, co dzieje się w mojej grze. Pierwszym z nich jest skalowanie tła, a drugie skalowanie głównej postaci.
Byłbym wdzięczny za każdą pomoc. Rozważałem dopełnienie każdej klatki z 50px (ile to wystarczy?), Aby wyeliminować problem, ale to wydaje się strasznie hackowate i chciałbym uzyskać prawdziwą odpowiedź.
mam spotkać ten sam problem. Wygląda na to, że jest to błąd przeglądarki Chrome, ponieważ najnowsze przeglądarki Safari i Firefox sprawiają, że obraz jest idealnie czysty i ostry. – gondo