IE造成褪色的图像白色斑点 [英] IE fade causing white spots on images

问题描述

我真的卡在这一个。网站几乎完成。只是想烫出与IE浏览器的最后几个错误 - 一个惊喜

I am really stuck on this one. Website is almost finished. Just trying to iron out the last few bugs with IE - what a surprise!

下面是preVIEW网站： HTTP：//www.$p$ pview.imageworkshop.com/portfolio/

Here is the preview site: http://www.preview.imageworkshop.com/portfolio/

问题
如果您在IE中查看​​投资组合页面，并使用过滤器交换背部和远期选项之间，过一小会儿的图像开始得到覆盖白点（particularily暗区）。

THE PROBLEM if you view the portfolio page in IE, and use the filters swapping back and forwards between options, after a little while the images start to get covered in white dots (particularily in dark areas).

注意：我已经实现同位素的过滤/布局网站上的组合。

Note: I have implemented ISOTOPE for the filtering / layout on the website Portfolio.

CSS3过渡是在CSS定义的，但是我相信，同位素降低回使用jQuery的动画效果。

CSS3 transitions are defined in the CSS, however I believe that ISOTOPE is degrading back to using jquery for the animation effects.

这是一个摄影网站，所以有好看的图像是非常重要的。

This is a photography website, so having good looking images is important.

的事情我已经知道了：
- 这是在IE6，7和8的已知问题，引起淡入/淡出和像素越来越留给透明

Things I know already: - this is a known issue in IE6, 7 and 8, caused by fadein/fadeout and pixels getting left as transparent.

• 人声称可以通过移动图像的黑点解决这个问题，因为supposidly它只是真黑的像素是有问题的。 我们尝试这样做，它不会对我们工作 - 我们也不想进行这些更改监守色彩精确度是图像的重要，和不断变化的黑点开始与图像搞乱。在投资组合在底部的3大图有他们的黑点转移​​，他们仍然可以得到白点。

• people claim you can fix this by moving the black point of the image, as supposidly it is only 'true black' pixels that have the problem. We tried this, and it does not work for us - and we also don't want to make these changes becuase colour accuracy is important for the images, and shifting the black point starts messing with the image. In the portfolio the 3 big images at the bottom have had their black points shifted and they still get white dots.

显然，父分区框的背景颜色设置为黑色也将解决这个问题。这似乎为我工作，如果我设置.photos黑色的背景（但是这使得屏幕黑一半好，但其设置包含图片（.photo）没有帮助。在DIV的背景下如果有一个这样，我们可以得到这个工作，这将是一个合适的解决方案。我不能让它为我工作（？）。

apparently, setting the background colour of the parent div box to black will also solve the problem. this seemed to work for me if I set the background of .photos to black (but this makes half the screen black as well. But setting the background of the DIV which contains the picture (.photo) did not help. If there is a way that we can get this to work, this would be a suitable solution. I can't get it to work for me (?).

那么，从这里？
CSS：我可以通过设置animationEngine关闭的转换/淡入等同位素。这effectivley意味着，如果浏览器支持CSS3那么CSS将用于过渡，但如果没有，浏览器将无法恢复使用的JavaScript做的转换。然而，这意味着有在页面上的IE，它看起来裤子上没有过渡

So where to from here? I can turn off the transitions/fadein etc in ISOTOPE by setting animationEngine : 'CSS'. This effectivley means that if the browser supports CSS3 then the CSS will be used for the transitions, but if not, the browser will not revert to using javascript to do the transitions. However, this means that there is no transition on the page on IE, which looks pants.

理想我需要修复白斑问题。
- 如何我也许能得到同位素过滤后刷新图像有什么建议？
- 也许还有另一种方法可以让我做的转换？
- 是否有可能去掉淡入/淡出，但仍使用变换某种让我仍然有一些动画在IE中发生的事情。

Ideally I need to fix the white spot issue. - any suggestions on how i might be able to get ISOTOPE to refresh the images after a filter? - maybe there is another way I can do the transitions? - is it possible to remove the fadein/fadeout, but still use a transform of some sort so that I still have some animation happening in IE?

任何帮助将大大AP preciated。我一直在撕裂我的头发了所有的周末试图得到这个工作，但没有成功。

Any help would be greatly appreciated. I have been tearing my hair out all weekend trying to get this to work, with no success.

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

UPDATE: 8/9/2011 I managed to find a way to turn off the fade transition, however, the javascript filter that I am using still sets the opacity to 0 to hide the image, and this is actually causing the white spot issue to occour. So I really need to find a way to get the background colour to be set to black so that it hides the transparent pixels.

推荐答案

好了，我设法解决这个问题。下面是关于通用的修复细节（为什么它会奏效的原因），然后在那我如何应用此修复程序的细节 - 这是独一无二的，我使用jQuery插件ISOTOPE

ok, so I managed to fix this issue. Below are details on the generic fix (the reason why it works), and then under that the specifics of how I applied this fix - which are unique to the jquery ISOTOPE plugin I am using.

请注意，从原来的职位的preVIEW网站不再活跃，但实际网站现在可以看这里：的 http://www.imageworkshop.com/portfolio/

Note that the preview site from the original post is no longer active, but the live website can now be viewed here: http://www.imageworkshop.com/portfolio/

总GENERIC FIX

问题通过的透明度在IE中隐藏的形象造成：0; （不一定是特定于IE的衰落，因为大多数其他线程建议我删除了不透明度褪色，但仍然是相同的。问题监守不透明：0;被用来隐藏筛选的图像

the problem is caused by hiding an image in IE using opacity:0; (not necessarily specific to fading in IE as most other threads suggest. I removed the opacity fade, but still had the same issue becuase opacity:0; was used to hide the filtered images.

答案是使用显示：无; 隐藏图像的IE

the answer is to use display:none; to hide the images for IE.

THE FIX我的具体实施

用于锅炉板，以确定旧的/有问题的浏览器，通过我的话preSS主题的header.php文件使用此code - 这增加了一类.oldie当一个旧的浏览器中标识：

Used boiler plate to identify old / problematic browsers, by using this code in the header.php file of my wordpress theme - this adds a class ".oldie" when an old browser is identified:

<!-- 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使用显示：无;，的而不是opactiy：0同位素（注意，这是针对我使用隐藏/过滤图像同位素插件

CSS to use display:none;, instead of opactiy:0 for ISOTOPE (note this is specific to the ISOTOPE plugin that I am using to hide/filter images.

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

在同位素的javascript，顶部确定是否存在过时的歌曲：

In the ISOTOPE javascript, at the top identify if oldie exists:

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

然后告诉同位素使用哪个样式为：

Then tell isotope which sytle to use:

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

下面是一个示例网站，显示了这种操作：的http：/ /support.metafizzy.co/2011/09-12-ie-trans.html

here is a sample site which shows this in operation: http://support.metafizzy.co/2011/09-12-ie-trans.html

和从该页面同位素的JavaScript声明（注意，这是比简单的东西我已经在我的网站上使用）

and the javascript declaration for ISOTOPE from that page (note that this is simpler than what i have used on my website)

 <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>

这篇关于IE造成褪色的图像白色斑点的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！