奇數框在鉻

我試圖放置一個動畫gif在jpg，它似乎在大多數瀏覽器（IE，Firefox，iPhone，iPad）的工作，但有一個奇怪的框周圍動畫gif在windows上的鉻,firefox for mac和chrome for mac。奇數框在鉻

我終於解決了它通過幾個奇怪的黑客，像迫使圖像調整到99.9％，使用掩碼只允許一部分動畫gif顯示，但是有沒有更好的/更清潔的跨瀏覽器解決方案？

我基本上開始與一個div和一個圖像裏面，這兩個都是響應。
HTML：

<div> 
    <img src="http://www.enjoyillinois.com/images/animations/Garden_of_Gods_anim_full.gif" /> 
</div>

CSS：

div { 
    background-image: url("http://www.enjoyillinois.com/images/animations/Garden_of_Gods_bg.jpg"); 
    background-repeat: no-repeat; 
    background-size: cover; 
} 

img { 
    width:100%; 
    display:block; 
}

這裏是一個的jsfiddle：http://jsfiddle.net/GyDCx/7/

來源

2013-05-22 Robert McKee

很酷的gif你在那裏。並且加上1以獲得適當的問題構建 – DextrousDave

我在Win7 Chrome中注意到它在調整窗口大小時會消失。我知道，這不是一種解決方案，但也許是一種潛在的... –

是的，如果調整窗口大小，它會消失。如果您將動畫綁定到該動畫並觸發任何類型的大小調整，它將會消失，直到您將它從屏幕上滾動並重新顯示在屏幕上，然後再次出現。 –

這是一個圖像邊緣結垢問題，我在這種情況下使用該解決方案是：

img{ image-rendering:-webkit-optimize-contrast; }

這縮放圖像時，禁用模糊的邊緣。 http://jsfiddle.net/GyDCx/31/

來源

2013-05-24 12:48:19 Willem

+1這似乎解決了它。有用的技巧！ –

這看起來可以解決它在我的Windows機器上的Chrome。當我週二回到辦公室爲Mac電腦時，我將不得不重新測試它。這正是我所期待的！ –

這確實解決了我測試的所有平臺上的問題。很好的答案！ –

你可以試試：

-webkit-transform: translateZ(0px);

這將修復它在Chrome中。

看到：http://jsfiddle.net/PvnmK/7/

PS1：還測試了在Safari和Firefox。

來源

2013-05-24 06:03:08 JayMoretti

即使我在chrome 27.0.1453.93或甚至17.0.963.66上調整大小，也無法看到邊框 – JayMoretti

您是指它不對齊的部分？這就是問題所在。 – JayMoretti

從@Jay Moretti小提琴，如果你讓你的'div'爲'inline-block;'，我認爲問題沒有了。但是，是的，當你拉伸時，圖像不會統一縮放 - @ user1846192 – Nitesh

回答

相關問題