I see strange behavior after applying a pair of transforms to elements with background images in Chrome.
I'm trying to create a game with a background across the screen and a scaled character that moves around that background. The character has several frames of animation, and I show each frame by moving the position of the background x or y, similar to the usual methods of writing CSS.
The problem is that I see the top edge or left edge of adjacent frames in the image of my character. Now this happens only on a certain scale, but it is clearly visible and distracting. For demonstration, I use a 364x1328 image with two frames. The upper frame contains a black box without red in the range of 364x664. The bottom frame is solid red. The top frame with the selected borders is shown in my image editor on the left, and the output from Chrome is inserted on the right:
When you exit Chrome, you can clearly see the red frame at the bottom. Given that my background image is contained in a 364x664 window, I expect that only pixels will be displayed in this window. In other words, I would like to see what I see in scale(1) , but decreased. Chrome seems to be deciding on the choice of background image for any reason.
To make the demo simple, I included a JS script: 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>
Now I'm not sure if this is a video card or machine in some way. In the violin, you will see two scalable transformations. This imitates what is happening in my game. The first is scaling the background, and the second is scaling the main character.
I would appreciate any help. I have considered filling each frame with 50px (how much is enough?) Add-ons to fix the problem, but it seems terribly hacked, and I would like to get a real answer.