【发布时间】：2014-03-27 02:01:56
【问题描述】：
我在 Chrome 浏览器和 Chromecast 中遇到大图像的不透明度过渡问题。
他们工作，但他们“衣衫褴褛”。我的意思是我在过渡期间在图像中出现水平噪声线。
我看到这项工作，例如，在 Chromecast 主屏幕上，所以它可以干净地完成。我正在以我认为简单、明显的方式来做这件事，但显然有一个我没有看到的技巧。
这是一个演示问题的简单页面的完整 HTML：
<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<style>
.opaque {
opacity: 1.0;
transition: opacity 1s linear;
}
.transparent {
opacity: 0.0;
transition: opacity 1s linear;
}
</style>
<title>Opacity transition test</title>
</head>
<body>
<script>
function fadeIn() {
console.log("::fadeIn()");
image = document.getElementById("image");
console.log("image is: " + image);
image.className = "opaque";
};
function fadeOut() {
console.log("::fadeOut()");
image = document.getElementById("image");
console.log("image is: " + image);
image.className = "transparent";
};
</script>
<button onclick="fadeIn()">Fade In</button>
<button onclick="fadeOut()">Fade Out</button>
<br />
<br />
<img id="image" class="opaque" src="image.jpg" />
</body>
</html>
在倒数第三行中，将“image.jpg”替换为相当大的图片 (720 x 1280) 的 URL。或者，当您尝试运行它时，将名为“image.jpg”的相当大的图像放在与 HTML 相同的目录中。
我尝试了很多变体，但是当在 Chrome 浏览器中运行时，或者在我正在开发的 Chromecast 自定义接收器中使用此技术时，它们都会显示噪声线。
如果您在浏览器中尝试此操作，请务必使用 Chrome 来查看，因为在我尝试过的任何其他浏览器中都不会发生这种情况！ :-(
任何人都可以在这方面提供任何帮助，我们将不胜感激。
提前致谢，
吉姆·伦克尔
【问题讨论】：
-
我已将其放入jsfiddle - click here。请上传您正在使用的图片并将其链接到此小提琴中，然后单击 jsfiddle 页面上的“更新”并将小提琴链接复制粘贴到您的问题中。
-
misterSamMan：我相信我已经完成了你的要求。这是修改后的小提琴的链接：jsfiddle.net/jim_renkel/qWTK5/1 当我在 Firefox 中运行它时，它看起来很棒；铬，不是那么多。感谢您迄今为止的帮助。
-
您能否在http://www.imgur.com/ 上托管图像并添加到小提琴中，因为该图像受到保护。 In this fiddle - click here 我有一个
jpg和png，它们似乎在最新版本的Chrome 中没有问题... 那fiddle have problems for you? -
很抱歉 Gdrive 出现问题。我已将图像标记为可供公众访问，但我一定做错了什么。我将图片上传到i.imgur.com/97Ml3gy.jpg（希望我做对了！）:-)，并修改了小提琴以在此处使用它：jsfiddle.net/jim_renkel/qWTK5/4。我还修改了小提琴以全尺寸显示图像：正如我所说，我只遇到大图像的问题。再一次，小提琴在 Firefox 上显示得很好，但在 Chrome 上却很糟糕。感谢您迄今为止的帮助。
-
好的，图像正常工作 :) 我真的很讨厌这样说，但过渡对我来说就像黄油一样顺利。最新的铬。我现在在 Mac OS X 和 Windows 7 上都试过了……没问题！
标签： css google-chrome transition opacity chromecast