Question

摘要：响应缩放的精灵滑动并偶尔显示不正确的精灵。

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

问题： 我正在尝试响应地扩展芯片和卡片精灵以用于扑克游戏。我有完美的缩放工作（并在游戏中根据表格大小重新定位和完美缩放），但精灵在调整大小时似乎“滑动”，偶尔显示不正确的卡片。在努力发现这种最不合时宜的行为的解决方案的同时，我遇到了许多正确使用缩放精灵的网站，但我不能为我的生活确定我的错误。

示例： 我已经准备了一个只显示问题的相关部分的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倾向于将小数舍入到整数像素会导致精灵的滑动。不幸的是，没有多少css可以改变这种行为，使我的上述问题不可能。

尽管如此，仍然有一种方法可以在webkit中使用缩放的精灵，但必要时它会使用javascript。

由于必须确保缩放的精灵大小始终为整像素，因此应选择尽可能频繁（整数）倍数的精灵大小比例（例如3：4），然后仅更新显示的当您的缩放导致其中一个时，精灵的大小。它不是非常流畅，绝对不是被动的，但它确实允许工作，跨浏览器扩展。

我已经将精灵的大小调整为66 * 88，使用这个我终于可以使用缩放卡了。在窗口大小调整开始时，javascript会隐藏所有精灵（卡片，芯片等），并在完成后更新其大小和位置。这有效地隐藏了调整大小期间用户的任何抖动，并大大简化了动画处理。

我的响应式精灵正在滑动

1 个答案: