All geek questions in one place

IE fades causing white spots on images

I am really stuck on this. The site is almost finished. Just trying to smooth out the last few errors with IE - what a surprise!

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

PROBLEM if you look at the portfolio page in IE and use filters that switch back and forth between the options, after a while the images begin to become covered with white dots (especially in dark areas).

Note. I implemented ISOTOPE for filtering / linking on the Portfolio website.

CSS3 transitions are defined in CSS, however I believe ISOTOPE is getting worse with jquery for animation effects.

This is a website for photography, so it’s important to have good images.

The knowledge I already know: is a known issue in IE6, 7 and 8 caused by fadein / fadeout, and the pixels remain transparent.

  • People claim that you can fix this by moving the black dot of the image, because, apparently, these are only the “true black” pixels that have the problem. We tried this, and it didn’t work for us - and we also don’t want to make these changes, because color accuracy is important for the images, and the black dot offset starts to mess with the image. In the portfolio of 3 large images, black dots were shifted below and they still get white dots.

  • apparently setting the background color of the parent div field to black will also solve the problem. this seemed to work for me if I set the background. the photo to black (but it also makes the half of the screen black, but setting the DIV background that contains the image (.photo) didn't help. the way we can get this to work, that would be a suitable solution.I can't make it work for me (?).

So where from here? I can disable transitions / fadein etc. In ISOTOPE, by setting the Engine: "CSS" animation. This effect means that if the browser supports CSS3, then CSS will be used for transitions, but if not, the browser will not return to using javascript to perform transitions. However, this means that there is no transition on the IE page that looks like pants.

Ideally, I need to fix a problem with a white spot. - any suggestions on how I can get ISOTOPE to update images after the filter? - Maybe there is another way to make transitions? - is it possible to remove fadein / fadeout, but still use some kind of transformation so that I still have the animation happening in IE?

Any help would be greatly appreciated. I kept tearing off my hair, trying to make it work, without success.

UPDATE: 09/08/2011 I managed to find a way to turn off the fade-out, however the javascript filter that I use still sets the opacity to 0 to hide the image, and this actually causes a white spot problem. So I really need to find a way to set the background color to black so that it hides the transparent pixels.

+6
source share
4 answers

ok, so I managed to fix this problem. Below is the details of the general fix (the reason it works) and then, in particular, how I applied this fix, which are unique to the jQuery ISOTOPE module used.

Note that the preview site from the original message is no longer active, but now you can view the current website: http://www.imageworkshop.com/portfolio/

GENERAL CORRECTION

the problem is caused by hiding the image in IE using opacity: 0; (not necessarily dependent on attenuation in IE, like most other threads). I removed the opacity, but still had the same problem due to the opacity: 0, was used to hide the filtered images.

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

MY SPECIAL IMPLEMENTATION OF THE CORRECTION

The boiler plate used to identify old / problem browsers using this code in the header.php file of my wordpress theme - this adds the ".oldie" class when the 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 to use display: none ;, instead of opactiy: 0 for ISOTOPE (note that this is specific to the ISOTOPE plugin, which I use to hide / filter images.

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

In javascript ISOTOPE at the top, indicate if the old exists:

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

Then let's say an isotope that can be used:

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

Here is an example site that shows this in action: http://support.metafizzy.co/2011/09-12-ie-trans.html

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

  <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>
+1
source

I had the same problem as the original poster. To get rid of the white pixels / dots, I set the background color of the div containing my images to # 000, and this fixed the problem.

Hope this helps all those frustrated developers who want to completely destroy IE as badly as I do.

+1
source

I somehow solved this problem by saving images in CMYK mode (only for JPG files).

+1
source

In one of the projects in which I participate, the guys just don’t use animations for IE, so it really can be a way - far from the ideal world, but close to the real one.

0
source

Source: https://habr.com/ru/post/896587/

More articles:


All Articles