我響應縮放精靈的滑動

摘要：作爲響應，縮放精靈滑動偶爾顯示不正確的精靈。我響應縮放精靈的滑動

背景： 我GOOGLE和SO細讀爲回答這個 - ，並發現了幾個，如this one - 但他們沒有告訴我什麼，我還沒有被時間和時間再次。過去一週我一直在做這個，我感到非常沮喪。 :(

問題： 我想響應擴展芯片和卡精靈在撲克遊戲中使用我的縮放工作完美（和遊戲中的一切重新定位和規模完全根據表的大小），但精靈似乎它的大小調整期間「滑」，並且偶爾流露出不正確的卡，同時努力探索解決這一最不體面的行爲，我遇到正確使用縮放精靈無數網站，但我不能爲生命我決定我在做什麼我的錯誤

例如： 我已經準備了只有r的jsfiddle http://jsfiddle.net/VsfZD/2/

適用CSS：（滿足的jsfiddle +規範要求）：顯示的問題，在這裏elevant部分

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

請，如果你能幫助我解決這我會很大的債務！

附加REQ的：只有CSS。沒有框架，沒有引導，沒有js。必須在IE8中工作

來源

2013-10-02 Terra Ashley

我的理論是瀏覽器通過引入舍入錯誤導致精靈滑動。在連續對53 10個精靈滑動課業如果我能得到這個工作，我可以簡單地用一個10x6網格來代替。 –

Webkit將小數點四捨五入爲整數像素的傾向導致精靈滑動。不幸的是，沒有CSS的量可以改變這種行爲，使我的上述問題不可能。

儘管如此，仍然有WebKit的中使用縮放的精靈，但必然是使用JavaScript的方式。因爲您必須確保縮放的精靈大小總是以整個像素爲單位，所以應該儘可能選擇精度大小比例（如3：4），然後僅更新該精靈大小比例（例如3：4）顯示精靈的大小，當你的縮放結果在其中之一。它不是非常流暢，絕對不是被動的，但它確實允許工作，跨瀏覽器縮放。

我已經調整了我們的精靈66 * 88，使用這個我終於有縮放卡的工作。在窗口大小調整開始時，javascript隱藏所有精靈（卡片，芯片等），並在完成後更新其大小和位置。這有效地隱藏了用戶在調整大小期間的任何抖動，並大大簡化了動畫處理。

來源

2013-10-09 05:21:12

我響應縮放精靈的滑動

回答

相關問題