不透明度过渡在 chrome 和 chromecast 中带有大图像
Posted
技术标签:
【中文标题】不透明度过渡在 chrome 和 chromecast 中带有大图像【英文标题】：opacity transition is ragged in chrome and chromecast with large images 【发布时间】：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 上都试过了……没问题！
【参考方案1】：
对于幻灯片应用程序，我正在按照这些思路做一些事情（在 chromecast 上）。首先，我使用 -webkit-transition 而不仅仅是转换，所以我的 css 具有以下内容
-webkit-transition: opacity 4s ease-in;
你需要花时间看看什么对你有意义。我在幻灯片应用程序中做的另一件事是我有两个<img/> 标签，一个是可见的，一个是隐藏的；我更新了隐藏的，完成后，我将前面的转换为 100 透明，使用我显示的转换，隐藏的转换为可见的，并继续这样操作，以便图像的转换和加载不会干扰。这提供了一个相对不错的过渡。
目前的chromecast设备缺乏某些优化；很多 CSS 过渡都是在软件中完成的。此外，目前缺少双缓冲；其中很多都在待办事项清单上，我们将与他们联系，以使这款小巧的设备变得更好。
【讨论】：
阿里：谢谢cmets。在我的 Chromecast 应用程序的接收器中，我正在按照您的方式进行操作：多个以上是关于不透明度过渡在 chrome 和 chromecast 中带有大图像的主要内容，如果未能解决你的问题，请参考以下文章
CSS 过渡：不透明度和可见性过渡不适用于 Firefox（适用于 Chrome / Safari）