IE淡入淡出导致图像上出现白点

Question

IE淡入淡出导致图像上出现白点

Gea*_*aru 6 javascript animation internet-explorer image css3

我真的被困在这一个.网站差不多完成了.只是试图用IE来消除最后几个错误 - 真是一个惊喜!

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

问题是, 如果你在IE中查看投资组合页面,并使用过滤器在选项之间交换和转发,过了一会儿,图像开始被白点覆盖(特别是在黑暗区域).

注:我已经实现同位素的网站上组合滤波/布局.

CSS3过渡是在CSS中定义的,但我相信ISOTOPE会降级为使用jquery进行动画效果.

这是一个摄影网站,所以拥有漂亮的图像很重要.

我已经知道的事情: - 这是IE6,7和8中的一个已知问题,由fadein/fadeout引起,像素变为透明.

人们声称你可以通过移动图像的黑点来解决这个问题,因为它只是"真正的黑色"像素才有问题.我们试过这个,它对我们不起作用 - 我们也不想做这些改变,因为颜色准确性对于图像很重要,并且移动黑点开始弄乱图像.在投资组合中,底部的3个大图像已经移动了黑点,并且仍然得到白点.
显然,将父div框的背景颜色设置为黑色也可以解决问题.如果我将.photos的背景设置为黑色,这似乎对我有用(但是这也使得屏幕的一半也是黑色的.但是设置包含图片(.photo)的DIV的背景没有帮助.如果有的话我们可以让它工作的方式,这将是一个合适的解决方案.我不能让它为我工作(？).

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

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

任何帮助将不胜感激.整个周末我一直在试着把头发弄掉,但是没有成功.

更新:8/9/2011 我设法找到一种关闭淡入淡出过渡的方法,但是,我使用的javascript过滤器仍将不透明度设置为0以隐藏图像,这实际上导致白点问题occour.所以我真的需要找到一种方法来将背景颜色设置为黑色,以便隐藏透明像素.

Answer 1

Gea*_*aru 1

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

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

一般修复

该问题是由于在 IE 中使用 opacity:0 隐藏图像引起的；（不一定像大多数其他线程所建议的那样特定于 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]-->

Run Code Online (Sandbox Code Playgroud)

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

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

Run Code Online (Sandbox Code Playgroud)

在 ISOTOPE javascript 中，在顶部确定 oldie 是否存在：

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

Run Code Online (Sandbox Code Playgroud)

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

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

Run Code Online (Sandbox Code Playgroud)

这是一个示例网站，显示了其运行情况：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>

Run Code Online (Sandbox Code Playgroud)

归档时间：	14 年，3 月前
查看次数：	1988 次
最近记录：	13 年，4 月前