Using ItemTemplate with Transparent PNG in IE

[Kevin Kembel]

I'm having troubles getting the rotator to do what it obviously should in IE.  I have a horizontal rotator that uses button clicks to advance the rotator.  The items in the rotator is dynamic based on the user (some users may have 15-20 items, some may only have 1). 

Each item template contains one PNG image that is links to another website.  Each image is a circle (like an M&M) that has a transparency in the PNG to fade to the background (it's a gradual fade with different degrees of transparency, different than a GIF).

It looks fine on first load, but as soon as I scroll either left or right, each item that is displayed has a horrible reaction with the transparency.

I'm using IE7, but it looks fine in both FireFox3 and Safari for PC.  I also noticed that if I do a GIF with a transparent background it works fine, but I can't make it look as nice :)

I have a zipped project with example images I was going to attach, but doesn't look doable.  It is available if anyone needs it to help.

[Martin]

Hello Kevin Kembel,

Unfortunately, the problem you are experiencing is out of our control, as it is a purely browser behavior. Although IE already supports alpha channel transparency (RGBA), another nag problem still persists, and it is unlikely that Microsoft will fix it soon, and it is more an OS problem, rather than a purely IE issue.

In a few words:

The fade animation in RadRotator relies on CSS filter: alpha(opacity=int), which is in fact a non-standard CSS and it is supposed to work as the standard CSS opacity does (which is supported by all browsers, except IE). Microsft introduced the "CSS" filters in the late '90s with the release of IE5.5. As I mentioned already, these filters do not have much in common with CSS, but they rely on the DirectX technology.

The problem:

When we have a .png image with smooth dithering (24 Bit PNG with alpha transparency), the image is rendered correctly. However, if we apply CSS filter: alpha(opacity=int) to it (remember that we use it for the fade animation), the semi-transparent regions of the image are immediately turned to solid gray. This is a behavior that we are absolutely powerless to control.

I suggest you to either use .gif files or .jpg files with background (i.e. discard the transparency and use another approach). The other possible solution is to abandon the fade animation and use another type.

Kind regards,
Martin Ivanov
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.

[Kevin Kembel]

That definitely sounds like the problem that I'm experiencing, but why would the RadRotator be setting the css filter on my items when I'm set to SlideShowAnimation-Type: None.  I don't really care to use fade animation, but I don't believe I have it set to use that.

 

            <telerik:RadRotator ID="Rotator1" runat="server" RotatorType="Buttons"
                Skin="Vista" Height="150px" Width="200px" ItemWidth="200" ItemHeight="150">
                <ItemTemplate>
                    <img alt='<%# Eval("Description") %>' src='<%# Eval("ImageSrc") %>' onclick='<%# "window.location=\"" + Eval("Url") + "\"" %>' />
                </ItemTemplate>
            </telerik:RadRotator>

If you can give me any clues as to how I can get this to work with the 24-bit PNG's, I'd really like to see if that's possible.  Otherwise I'll have to use transparent GIFs, a static background really won't do in my situation.

 

[Martin]

Hi Kevin Kembel,

Well, this is strange. Could you prepare a fully running project, along with your images, custom styles, layout, etc, and I will try to help. The framework may apply filters, even if the animation is turned off.

Sincerely yours,
Martin Ivanov
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.

[Kevin Kembel]

Hi Martin Ivanov,

I appreciate your prompt replies.

I couldn't see where to attach a file to a posting, although I've seen it done in other threads.  Instead, I have the .zip file online for you to download (includes the images that I'm using in my project, as well as screenshots of what it looks like in my IE when I use the RadRotator).

Let me know if I forgot anything in the zip...

http://files.fabutan.com/telerikrotatortest.zip

Kevin

[Fiko]

Hello Kevin,

A short description of the problem and a working solution are described in this Code library page. I applied it in the project that you send and it works:

<img style="background-color: #fff;"  alt='<%# Eval("Description") %>' src='<%# Eval("ImageSrc") %>'
    onclick='<%# "window.location=\"" + Eval("Url") + "\"" %>' />

I hope this helps.

Best wishes,
Fiko
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.

[Kevin Kembel]

Hi Fiko,

Thank you for the suggestion, it does work in the example I provided which has a white background.  However, in my actual solution, a solid background will not work since I need it to be transparent (my actual example is shown in the screenshots packed up with the solution).

I tried explicitly setting the background to transparent on the img object, but didn't have any luck.  Is it only possible with a solid colour background?

[Fiko]

Hi Kevin,

Unfortunately this is the best workaround that we found of that behavior under IE browsers. Of course once we have a better solution that produces consistent result in all major browsers, we will release it right away.

Greetings,
Fiko
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.