My responsive-scaled sprites are sliding

Question

Summary: Responsively-scaled sprites sliding and occasionally displaying incorrect sprite.

Background: I've googled and perused SO for answers to this -- and found a few, such as this one -- but they haven't told me anything I haven't already been over time and time again. I've been working on this over the past week, and I'm feeling extremely frustrated. :(

Problem: I'm trying to responsively scale chip and card sprites for use in a poker game. I have the scaling working perfectly (and in-game everything repositions and scales perfectly according to table size), but the sprites appear to "slide" during its resizing, and occasionally showing the incorrect card. While endeavoring to discover a solution to this most unseemly behavior, I've encountered numerous sites using scaled sprites correctly, but I cannot for the life of me determine what I'm doing wrong with mine.

Example: I've prepared a jsfiddle with only the relevant portions displaying the issue, here: http://jsfiddle.net/VsfZD/2/

Applicable CSS: (to satisfy the jsfiddle+code requirement):

---

/* Cards are 47x64  (spritesheet is 53 cards wide, so 2491x64 px) */
/* Spacer is 47x64 */

.card {
  position:   absolute;
  width:      4%;
  max-width:  47px;
  z-index:    306;
  overflow:   hidden;
}

.card img.card_spacer {
  display:    block;
  height:     auto;
  width:      100%;
}

.card img.card_img {
  position:   absolute;
  top:        0px;
  left:       0px;
  max-width:  none;
  max-height: 100%;
}

.two-clubs     img.card_img { left:   -200%; }
.six-diamonds  img.card_img { left:  -1600%; }
.ace-diamonds  img.card_img { left:  -4900%; }
.card_back     img.card_img { right: -5200%; }

---

Please, if you can help me fix this I'll be greatly in your debt!

Additional req's: css only. no frameworks, no bootstrap, no js. must work in IE8

Answer 1

Webkit's penchant for rounding decimals to whole numbers of pixels causes the sliding of sprites. Unfortunately, no amount of css can alter this behavior, rendering my above question impossible.

That said, there is still a way to use scaled sprites within webkit, though by necessity it uses javascript.

As you must ensure that the scaled sprite sizes are always in whole pixels, you should pick a sprite size ratio (such as 3:4) with as frequent (whole-number) multiples as possible, and then only update the displayed sprites' sizes when your scaling results in one of these. It isn't perfectly smooth, and definitely not passive, but it does allow for working, cross-browser scaling.

---

I've resized our sprites to 66*88, and using this I finally have scaling cards working. At the start of window resizing, javascript hides all of the sprites (cards, chips, etc.) and updates their sizes and locations upon completion. This effectively hides any jittering from the user during resizing, and greatly simplifies animation handling.