镀铬的奇怪盒子答案

【问题标题】：Odd box in chrome镀铬的奇怪盒子
【发布时间】：2013-05-17 01:24:08
【问题描述】：

我试图在jpg 上放置一个动画gif，它似乎适用于大多数浏览器（IE、Firefox、iPhone、iPad），但动画gif 周围有一个奇怪的框在 chrome on 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/

【问题讨论】：

你有很酷的 gif。再加上 1 用于正确的问题构造
我注意到在 Win7 Chrome 中调整窗口大小时它会消失。我知道，这不是一个解决方案，但也许是一个线索......
是的，如果您调整窗口大小，它就会消失。如果您将动画绑定到它会触发任何类型的调整大小，它也会消失，也就是说，直到您将其从屏幕上滚动并返回到屏幕上，然后它会再次出现。
我还注意到 jpg 和 gif 并没有完全正确排列，但是，它在实时实现中排列得很好，所以我并不担心。
不错的网站！ ::enjoyillinois.com

标签： html css google-chrome responsive-design

【解决方案1】：

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

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

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

【讨论】：

这似乎可以在我的 Windows 机器上为 Chrome 修复它。当我周二回到办公室时，我将不得不重新测试它。这正是我想要的！
这确实解决了我测试的所有平台上的问题。不错的答案！

【解决方案2】：

你可以试试：

-webkit-transform: translateZ( 0px );

这将在 Chrome 中修复它。

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

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

【讨论】：

即使我在 chrome 27.0.1453.93 甚至 17.0.963.66 上调整大小也看不到边框
你的意思是它错位的部分？这就是问题所在。
来自@Jay Moretti Fiddle，如果您将div 设置为inline-block;，我认为问题已经消失。但是，是的，当您拉伸时，图像不会均匀缩放 - @user1846192
通过编辑原始小提琴并添加转换来修复：jsfiddle.net/PvnmK/7