css - 我的响应式缩放 Sprite 在滑动

Question

总结响应式缩放的 Sprite 滑动并偶尔显示不正确的 Sprite 。

背景: 我用谷歌搜索并仔细阅读了 SO 的答案——并找到了一些，例如 this one -- 但他们没有告诉我任何我已经一次又一次经历过的事情。过去一周我一直在研究这个问题，我感到非常沮丧。 :(

问题: 我正在尝试响应式地缩放筹码和纸牌 Sprite 以用于扑克游戏。我的缩放效果很好(游戏中的所有东西都根据 table 大小重新定位和缩放)，但 Sprite 在调整大小时似乎“滑动”，偶尔会显示不正确的卡片。在努力寻找解决这种最不合时宜的行为的方法时，我遇到过许多正确使用缩放 Sprite 的网站，但我终究无法确定自己做错了什么。

示例: 我准备了一个只有相关部分显示问题的 jsfiddle，这里:http://jsfiddle.net/VsfZD/2/

适用的CSS:(满足jsfiddle+代码要求):

---

/* 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%; }

---

拜托，如果你能帮我解决这个问题，我将感激不尽!

其他要求:仅 css。没有框架，没有 Bootstrap ，没有 js。必须在 IE8 中工作

Answer 1

Webkit 倾向于将小数舍入为整数像素，这会导致 Sprite 滑动。不幸的是，没有多少 css 可以改变这种行为，使我的上述问题不可能。

也就是说，仍然有一种方法可以在 webkit 中使用缩放 Sprite ，尽管它必须使用 javascript。

由于您必须确保缩放后的 Sprite 尺寸始终以整像素为单​​位，因此您应该选择一个 Sprite 尺寸比例(例如 3:4)并尽可能频繁地(整数)倍数，然后只更新显示的当您的缩放比例导致其中之一时， Sprite 的大小。它不是非常流畅，绝对不是被动的，但它确实允许工作，跨浏览器缩放。

---

我已将 sprite 的大小调整为 66*88，使用它我终于可以使用缩放卡了。在开始调整窗口大小时，javascript 隐藏所有 Sprite (卡片、筹码等)并在完成后更新它们的大小和位置。这有效地隐藏了用户在调整大小时的任何抖动，并大大简化了动画处理。