IE 褪色导致图像出现白点答案

【问题标题】：IE fade causing white spots on imagesIE 褪色导致图像出现白点
【发布时间】：2011-11-10 02:09:46
【问题描述】：

我真的坚持这个。网站快完成了。只是试图用 IE 解决最后几个错误 - 真是令人惊讶！

这里是预览网站：http://www.preview.imageworkshop.com/portfolio/

问题如果您在 IE 中查看作品集页面，并使用过滤器在选项之间来回切换，过一会儿图像开始被白点覆盖（尤其是在黑暗区域）。

注意：我已经为网站 Portfolio 上的过滤/布局实现了ISOTOPE。

CSS3 过渡是在 CSS 中定义的，但是我相信 ISOTOPE 正在退化为使用 jquery 来实现动画效果。

这是一个摄影网站，所以拥有好看的图片很重要。

我已经知道的事情： - 这是 IE6、7 和 8 中的一个已知问题，由淡入/淡出和像素变得透明导致。

人们声称您可以通过移动图像的黑点来解决此问题，因为据说只有“真正的黑色”像素才有问题。 我们尝试过，但它对我们不起作用 - 我们也不想进行这些更改，因为颜色准确性对图像很重要，并且移动黑点开始弄乱图像。在组合中，底部的 3 张大图的黑点发生了偏移，但仍然出现白点。
显然，将父div框的背景颜色设置为黑色也可以解决问题。如果我将 .photos 的背景设置为黑色，这似乎对我有用（但这也会使一半的屏幕变黑。但是设置包含图片（.photo）的 DIV 的背景并没有帮助。如果有我们可以让它工作的方式，这将是一个合适的解决方案。我无法让它为我工作（？）。

那么从这里到哪里？ 我可以通过设置 animationEngine : 'CSS' 来关闭 ISOTOPE 中的过渡/淡入淡出等。这意味着如果浏览器支持 CSS3，那么 CSS 将用于过渡，但如果不支持，浏览器将不会恢复使用 javascript 来进行过渡。但是，这意味着IE上的页面没有过渡，看起来很裤子。

理想情况下，我需要解决白点问题。 - 关于如何让 ISOTOPE 在过滤后刷新图像的任何建议？ - 也许还有另一种方法可以进行过渡？ - 是否可以移除淡入/淡出，但仍使用某种变换，以便在 IE 中仍有一些动画发生？

任何帮助将不胜感激。我整个周末都在扯头发，试图让它发挥作用，但没有成功。

更新：2011 年 8 月 9 日 我设法找到了一种关闭淡入淡出过渡的方法，但是，我使用的 javascript 过滤器仍然将不透明度设置为 0 以隐藏图像，这实际上导致了白点问题的发生。所以我真的需要找到一种方法将背景颜色设置为黑色，以便隐藏透明像素。

【问题讨论】：

IE6/7/8 在不透明度方面做得不好。它使用filter CSS 属性将其职责委托给Windows 提供的AxtiveX 控件。这是非常古老的软件；它很慢，有问题，而且正如您所见，它产生的结果很差。但是，在 IE6/7/8 中没有其他方法可以实现淡入淡出效果。简而言之，IE 从来没有考虑过这样的效果。可能的效果在事后被硬塞进去了，它显示了。我没有适合您的解决方案，因为我认为没有解决方案。我希望其他人可以证明并非如此，但我对此表示怀疑。
我同意可能没有一个好的解决方案，但是，如果我能实现以下两件事之一，我会很高兴：1）让 DIV 背景颜色显示出来（这样隐藏白点。2) 仅删除 IE 转换的“淡入淡出”方面。如果图像通过移动和调整大小进行过渡，然后消失（没有褪色），我仍然会很高兴。

标签： javascript image internet-explorer animation css

【解决方案1】：

我遇到了与原始海报完全相同的问题。为了摆脱白色像素/点，我将包含我的图像的 div 的背景颜色设置为 #000，这解决了问题。

希望这可以帮助那些像我一样想彻底摧毁 IE 的沮丧的开发人员。

【讨论】：

你是对的，这是修复的最佳选择。在我的例子中，jquery 动画使包含 img 的 DIV 变平，因此背景颜色被忽略 - 非常令人沮丧。如果我将整个画廊背景设置为黑色，则修复工作 - 但这会破坏具有纯白色背景的网站的设计:)

【解决方案2】：

好的，所以我设法解决了这个问题。下面是有关通用修复的详细信息（它起作用的原因），然后是我如何应用此修复的细节 - 这是我正在使用的 jquery ISOTOPE 插件所独有的。

请注意，原始帖子中的预览网站不再有效，但现在可以在此处查看实时网站：http://www.imageworkshop.com/portfolio/

通用修复

问题是由使用 opacity:0; 在 IE 中隐藏图像引起的（不一定像大多数其他线程所建议的那样特定于 IE 中的淡入淡出。我删除了不透明度淡入淡出，但仍然具有相同的效果问题是因为 opacity:0; 用于隐藏过滤后的图像。

答案是使用 display:none; 为 IE 隐藏图像。

我对修复的具体实施

使用样板来识别旧/有问题的浏览器，通过在我的 wordpress 主题的 header.php 文件中使用此代码 - 这会在识别旧浏览器时添加一个类“.oldie”：

<!-- paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/ -->
<!--[if lt IE 7]> <html class="no-js ie6 oldie" lang="en"> <![endif]-->
<!--[if IE 7]>    <html class="no-js ie7 oldie" lang="en"> <![endif]-->
<!--[if IE 8]>    <html class="no-js ie8 oldie" lang="en"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]-->

CSS 使用 display:none;，而不是 opactiy:0 用于 ISOTOPE（注意这是特定于我用来隐藏/过滤图像的 ISOTOPE 插件。

 .oldie .isotope-hidden { display: none; }

在 ISOTOPE javascript 中，在顶部标识 oldie 是否存在：

 isOldie = $('html').hasClass('oldie');

然后告诉 isotope 使用哪种风格：

hiddenStyle: isOldie ? {} : $.Isotope.settings.hiddenStyle,
visibleStyle: isOldie ? {} : $.Isotope.settings.visibleStyle

这里是一个示例站点，它显示了这个操作：http://support.metafizzy.co/2011/09-12-ie-trans.html

以及来自该页面的 ISOTOPE javascript 声明（请注意，这比我在我的网站上使用的更简单）

 <script>
 $(function(){
    var $container = $('#container'),
    $photos = $container.find('.photo'),
    isOldie = $('html').hasClass('oldie');

    $container.imagesLoaded( function(){
       $container.isotope({
       itemSelector : '.photo',
       masonry: {
       columnWidth: 200
       },
       hiddenStyle: isOldie ? {} : $.Isotope.settings.hiddenStyle,
       visibleStyle: isOldie ? {} : $.Isotope.settings.visibleStyle
    });
 });
    $('#filters a').click(function(){
      $container.isotope({ filter: $(this).attr('data-filter') });
      return false;
    });
 });
 </script>

【讨论】：

【解决方案3】：

我曾经通过将图像保存为 CMYK 模式（仅适用于 JPG 文件）解决了这个问题。

【讨论】：

【解决方案4】：

在我参与的一个项目中，这些家伙根本不使用 IE 动画，所以这确实是一种可行的方法——远离理想世界，但接近现实。

【讨论】：

不幸的是，这似乎是许多人所采用的方法，远非理想 - 但有时是必要的。就我而言，关闭 animatnio 实际上并没有解决问题。该问题是由使用 opacity:0 过滤来隐藏图像引起的。我认为通过将其更改为使用 display: none 来代替我们已经取得了一些进展。仍在确认解决方案:)