[Solved] RadRotator slideshow, dots appear on some images.

[Eric Wagner]

I have a slideshow that's using the Telerik RadRotator and on certain images, there are these tiny white dots appearing and I can't figure out why... The images themselves do not have these until they appear in the slideshow.  The image sizes are never more than 50k...  Here's the parameters on the rotator:

<telerik:RadRotator ID="slideshowRotator" ScrollDirection="Left" RotatorType="SlideShow"
    SlideShowAnimation-Type="Fade" EnableViewState="false" OnClientItemShowing="ClientItemSlide"
    OnClientLoad="ClientItemSlideStart" SlideShowAnimation-Duration="1000" runat="server"
    DataSourceID="XmlDataSource1" Width="720" ItemWidth="720" Height="290" ItemHeight="290"
    FrameDuration="10000" InitialItemIndex="0" PauseOnMouseOver="false">

 

<ItemTemplate>
<a href="<%# XPath("url").ToString() %>" class="slideshowLink">
<div id="menuItem" style="background-image: url(<%# XPath("slide").ToString() %>); width: 720px; height: 290px;">

Here you can see that the images are applied to the background-image of the div inside the ItemTemplate.

 

 

 

 

 

 

 

 

 

[Eric Wagner]

Here's an example of what the image is supposed to look like (on top) and what it looks like in the slideshow on the bottom.

[Fiko]

Hi Eric,

We are aware of such a behavior in IE browsers. It is caused by the filters, used in IE in order to animate elements and it is a know problem of such browsers (you can observe some of the side effects in the attached project to this Code Libarary. The project contains HTML elements only). Playing around with this behavior, we found that setting some margin around the images fixes the problem.  Please note that, you need to take into account the margin when you set the ItemWidth and Itemheight properties, based on the instructions provided in this help page.

I hope this helps.

Greetings,
Fiko
the Telerik team