Custom Rating flickers in IE9 on Mouse Over

6 posts, 0 answers
  1. Chris
    Chris avatar
    58 posts
    Member since:
    Jun 2012

    Posted 04 May 2012 Link to this post

    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>
    </div>
  2. Chris
    Chris avatar
    58 posts
    Member since:
    Jun 2012

    Posted 04 May 2012 Link to this post

    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
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Slav
    Admin
    Slav avatar
    1356 posts

    Posted 08 May 2012 Link to this post

    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.
  5. Chris
    Chris avatar
    58 posts
    Member since:
    Jun 2012

    Posted 09 May 2012 Link to this post

    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
  6. adi
    adi avatar
    79 posts
    Member since:
    Feb 2007

    Posted 21 Jan 2013 Link to this post

    Hi Chris,

    did you find a solution for this topic? Have the same problem with IE.

    Regards,
    Adi
  7. Chris
    Chris avatar
    58 posts
    Member since:
    Jun 2012

    Posted 22 Jan 2013 Link to this post

    Hi Adi,
                sorry I have not found any solution to this. Luckily I was in a position to recommend using Firefox which was not affected by the issue.

    Regards,
    Chris
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017