This is a migrated thread and some comments may be shown as answers.

Custom Rating flickers in IE9 on Mouse Over

5 Answers 75 Views

Rating

This is a migrated thread and some comments may be shown as answers.

Chris asked on 04 May 2012, 11:45 AM

Hi,
I have three rating controls on a page two standard and one using custom images. The standard controls work fine in IE9 but the custom controls flickers on mouse over and mouse move, it is not just the item under the cursor but all of the items that flicker randomly. Seems OK on other browsers (have checked IE8, Chrome and FF9 and there is no flickering).

The images are all png and are 22px x 22px and about 1k in size.

I am using the Q1 2012 .NET 4.0 controls, on IIS 7.5 on Windows Server 2008R2.

Do you have any ideas?

Thanks

Chris
Markup:

<div id="score_entry">

<div id="grade" style="float: left">

Predicted Grade:

<telerik:RadRating ID="Predication" runat="server" Orientation="Horizontal" ItemHeight="22px"

ItemWidth="22px" ItemCount="7" SelectionMode="Single">

<Items>

<telerik:RadRatingItem Value="0" HoveredImageUrl="/Images/grades/snograde.png" HoveredSelectedImageUrl="/Images/grades/snograde.png"

SelectedImageUrl="/Images/grades/snograde.png" ImageUrl="/Images/grades/unograde.png"

ToolTip="No Grade" />

<telerik:RadRatingItem Value="7" HoveredImageUrl="/Images/grades/sS.png" HoveredSelectedImageUrl="/Images/grades/sS.png"

SelectedImageUrl="/Images/grades/sS.png" ImageUrl="/Images/grades/uS.png"

ToolTip="A*" />

<telerik:RadRatingItem Value="6" HoveredImageUrl="/Images/grades/sA.png" HoveredSelectedImageUrl="/Images/grades/sA.png"

SelectedImageUrl="/Images/grades/sA.png" ImageUrl="/Images/grades/uA.png"

ToolTip="A" />

<telerik:RadRatingItem Value="5" HoveredImageUrl="/Images/grades/sB.png" HoveredSelectedImageUrl="/Images/grades/sB.png"

SelectedImageUrl="/Images/grades/sB.png" ImageUrl="/Images/grades/uB.png"

ToolTip="B" />

<telerik:RadRatingItem Value="4" HoveredImageUrl="/Images/grades/sC.png" HoveredSelectedImageUrl="/Images/grades/sC.png"

SelectedImageUrl="/Images/grades/sC.png" ImageUrl="/Images/grades/uC.png"

ToolTip="C" />

<telerik:RadRatingItem Value="3" HoveredImageUrl="/Images/grades/sD.png" HoveredSelectedImageUrl="/Images/grades/sD.png"

SelectedImageUrl="/Images/grades/sD.png" ImageUrl="/Images/grades/uD.png"

ToolTip="D" />

<telerik:RadRatingItem Value="2" HoveredImageUrl="/Images/grades/sE.png" HoveredSelectedImageUrl="/Images/grades/sE.png"

SelectedImageUrl="/Images/grades/sE.png" ImageUrl="/Images/grades/uE.png"

ToolTip="E"

/>

<telerik:RadRatingItem Value="1" HoveredImageUrl="/Images/grades/sU.png" HoveredSelectedImageUrl="/Images/grades/sU.png"

SelectedImageUrl="/Images/grades/sU.png" ImageUrl="/Images/grades/uU.png"

ToolTip="U" />

</Items>

</telerik:RadRating>

</div>

<div id="classeffort" style="float: left">

Class Effort:

<telerik:RadRating ID="rrClassEffort" runat="server">

</telerik:RadRating>

</div>

<div id="prerpeffort" style="float: left">

Prep Effort:

<telerik:RadRating ID="rrPrepEffort" runat="server">

</telerik:RadRating>

</div>

5 Answers, 1 is accepted

answered on 04 May 2012, 05:59 PM

IE9-Flicker.jpg

Hi,
I have spent a bit more time looking at this and only elements 3 and 8 (B and U) in the image flicker. Running this in firefox with firebug I can see that on every mouse over on any element there is a change in element 8 (U). Interestingly if element 8 or element 3 are slected they do not flicker, it only happens when they are unselected.

I hope this helps.

Thanks

Chris

answered on 08 May 2012, 01:29 PM

Hi Chris,

Most probably the examined flickering occurs, because the images of the RadRating control are not cached by the browser. You can avoid this effect by using a sprite image that will include the background of all items in the RadRating. Than you can get the needed portion from the sprite via the CSS property background-position.

The RadRatingItem has a property CssClass that can be used for specifying its default background. The list in the help article RadRating CSS classes contains information for the CSS class used for every state of the RadRating items. Via the CSS class, specified in the CssClass property, and the CSS class, corresponding to the state of the item, you will be able to create the selector for setting the background of the particular item, depending on its state.

Note that this approach relies only on CSS styles and the properties HoveredImageUrl, HoveredSelectedImageUrl, SelectedImageUrl and ImageUrl will not be needed.

I hope this helps. Feel free to contact us again if you run into more difficulties.

Kind regards,
Slav
the Telerik team

If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.

answered on 09 May 2012, 01:28 PM

Hi Slav,
thanks for the replay. The sprite suggestion will not work for me as each item is different. I did some more digging and it looks like I may have had a corrupt cache entry on IE. Fiddler was showing that on mouse over the control was requesting the images for B and U (unselected) and A (selected). This would be why only B and U were flickering as those were the displayed images at the time.

After hunting for a reason I tried clearing IE's cache and once I revisited the page all was OK. SO even though the files existed in the the cache they were not being called.

Not sure why this would be, but all looks good now.

Thanks

Chris