Html 镀铬的奇数盒子

我试图将动画的

gif

放在

jpg

上，它似乎在大多数浏览器（如Firefox、iPhone、iPad）中都能正常工作，但在windows上的chrome中、mac上的Firefox和mac上的chrome中，动画的

gif

周围有一个奇怪的框

我最终通过一些奇怪的技巧解决了这个问题，比如强制将图像大小调整到99.9%，使用遮罩只允许动画gif的一部分显示出来，但是有更好/更干净的跨浏览器解决方案吗

我基本上是从一个div和一个图像开始的，它们都是响应的。
HTML:

下面是一个JSFIDLE:

您可以尝试：

-webkit-transform: translateZ( 0px );

这将在Chrome中修复它

见：

---

PS1:也在safari和firefox上进行了测试。

这是一个图像边缘缩放问题，我在这种情况下使用的解决方案是：

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

这将在缩放图像时禁用模糊边缘。

---

你那里的gif很酷。加1作为一个正确的问题结构，我注意到在Win7 Chrome中，当你调整窗口大小时，它会消失。我知道这不是一个解决方案，但可能是一个线索……是的，如果你调整窗口大小，它就会消失。如果你将一个动画绑定到它上，它会触发任何类型的调整大小，也就是说，直到你将它从屏幕上滚动到屏幕上，然后它会再次出现。我还注意到jpg和gif没有完全对齐，但是，它在实时实现中排列得很好，所以我不担心。很好的网站！：：即使我在chrome 27.0.1453.93甚至17.0.963.66上调整大小，也看不到边框。你是说它未对齐的部分？这就是问题所在。从@Jay Moretti小提琴手，如果你把

div

变成

内联块，我假设问题已经解决了。但是，是的，当你拉伸时，图像不会均匀缩放-@user1846192通过编辑原始小提琴并添加变换来修复：这看起来确实修复了我的windows机器上的Chrome。星期二我回办公室去看Mac电脑时，我得重新测试一下。这正是我要找的！这确实解决了我测试的所有平台上的问题。回答得好！
-webkit-transform: translateZ( 0px );

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