0

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

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

问题： 我正在尝试响应缩放筹码和纸牌精灵以用于扑克游戏。我的缩放工作完美（并且游戏中的所有内容都根据桌子大小完美地重新定位和缩放），但是精灵在调整大小期间似乎“滑动”，并且偶尔显示不正确的卡片。在努力寻找解决这种最不合时宜的行为的方法时，我遇到了许多正确使用缩放精灵的网站，但我终其一生都无法确定我做错了什么。

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

适用 CSS：（满足 jsfiddle+code 要求）：

/* 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。没有框架，没有引导程序，没有 js。必须在 IE8 下工作

4

1 回答 1

0

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.

于 2013-10-09T05:21:12.803 回答