Document issues with IE fading to white background

I could not find the fading issue on your site, but maybe you changed the slide text effect to slideup to make your slideshow also work in IE.

Yes, It's not easy to make everything work in IE.

Please let me know if this 'workaround' is good enough for you.

If you make the before effect direct = 0 and the after effect quicker it looks already better.

I tried some more things, also disabling css slide-text settings by making the slide-text container in the configuration page div.slide-text1. This causes the background of the slide text to stay transparent, the slidetext to fade if your slide effect is fade. Also looks good in IE7. You can give this a try.

I copied the string you have: 'Συνέχεια' to my preprocess function for the readmore button and it works perfectly.

Also changing prev and next in the file: ddblock-cycle-pager-content-upright20.tpl.php to the string: 'Συνέχεια' works ok.

Hope this helps you further. Please let me know.

The next version of the ddblock module will contain translatable text for the prev, next and read more text.

We had a similar issue with IE7 and a background which was transparent or partially opaque. IE7 would start with the correct background colour but then the element which faded in would fade to a solid white background. In IE7 the element showed a style declaration applied via JS with background-color: #fff on the element.

We resolved this by overriding the background for IE7 (only) with one which solid; the misbehaviour was resolved.

Fortunately we didn't have to worry about IE6, as the site in question already tells people using that browser that they are just being plain silly.

EDIT: Just to be absolutely clear - this was deceptive to debug for me, because the issue (in this case) affected fadeIn() of a transparent element on a transparent background, and the fix was to remove the transparency on the background - not the foreground.

I identified the source of the white background issues today -

// fix clearType problems in ie6 by setting an explicit bg color
// (otherwise text slides look horrible during a fade transition)
function getBg(e) {
		for ( ; e && e.nodeName.toLowerCase() != 'html'; e = e.parentNode) {
			var v = $.css(e,'background-color');
			if (v.indexOf('rgb') >= 0 ) {
				var rgb = v.match(/\d+/g);
				return '#'+ hex(rgb[0]) + hex(rgb[1]) + hex(rgb[2]);
			}
			if (v && v != 'transparent')
				return v;
		}
		return '#ffffff';
	};

-- from js/jquery.cycle.all.min.js in clearTypeFix.getBg() (also found in views_slideshow_ddblock module).

The white colour is selected by this piece of code when no background-color is supplied. Assigning a background-color to the element which fades to white should cause it to fade to the colour you select, which allows you to reduce the visual artefacts.

So in the end I identified two ways to solve the problem.

1. If using a solid or flat background colour, just set background-color on the element which gets faded to white. You can watch the CSS properties change in the IE Developer Toolbar and then specify the background colour for that element in your CSS. Results may vary with this approach, but if your background isn't solid white, it's a step in the right direction at least.

2. If using a textured or non-flat background, you need to replace the background of your transparent foreground element with a non-transparent background. See below.

I got pretty frustrated because my results were so irregular (and working with IE makes me despondent with such speed), so I ended up doing something like this below - repeating the background-image assignments for several elements until the fade behaved as expected. I could probably have removed the IE assignments for one or several of these, but there's no additional cost to the viewer and it would have been an additional cost to my client for me to test thoroughly; I left it as is. Your theme and templates will differ, so these class names won't work for you - but they should provide a pointer in the right direction.

div.views-slideshow-ddblock-cycle-vsd-mm4-front {
  background: url(images/slideshow-ie.png) no-repeat ;
}
div.views-slideshow-ddblock-cycle-vsd-mm4-front div.slider-inner {
  background: url(images/slideshow-ie.png) no-repeat ;
}
div.views-slideshow-ddblock-cycle-vsd-mm4-front div.slider-inner div.slide {
  background: url(images/slideshow-ie.png) no-repeat ;
}
div.views-slideshow-ddblock-cycle-vsd-mm4-front div.slider-inner div.slide div.slide-inner {
  background: url(images/slideshow-ie.png) no-repeat ;
}

Would like to suggest that this be considered for module documentation somewhere, as it seems this is something which is affecting a few people. For that reason I'm changing the title and category to a feature request for docs.

Please update status accordingly if you find my suggestions here don't solve the issue for you.

Thank you grobot, I was not able to follow your solution exactly as I needed a transparent background but you got me looking in the right place. After studying jquery.cycle I saw that the code in the function you quoted above is being called several lines below

$slides.each(function(){$(this).css("background-color",getBg(this));});

I simply commented out this line as all my backgrounds for this ddblock were transparent and that did the trick.