html - 镀铬的奇怪盒子

Question

我正在尝试gif在 a上放置动画jpg，它似乎在大多数浏览器（IE、Firefox、iPhone、iPad）中都可以使用，但是在 windows 上gif的chrome 中的动画周围有一个奇怪的框，适用于 mac 的 firefox和chrome对于 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/

Answer 1

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

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

这会在缩放图像时禁用模糊边缘。 http://jsfiddle.net/GyDCx/31/

Answer 2

你可以试试：

-webkit-transform: translateZ( 0px );

这将在 Chrome 中修复它。

见：http: //jsfiddle.net/PvnmK/7/

PS1：也在 safari 和 firefox 上测试过。