RadButton Image flickers on over in Chrome

4 posts, 1 answers
  1. Chris
    Chris avatar
    58 posts
    Member since:
    Feb 2012

    Posted 07 Mar 2013 Link to this post

    Hi there,

    I seen this issue several times in this forum but still no one were able to fix this. It only occurs in Chrome. FF, IE, Safari, Opera are all fine but Chrome.
    here's the control :
    <telerik:RadButton ID="rbtSamA0" runat="server" ToggleType="Radio" ButtonType="ToggleButton"
        AutoPostBack="false" GroupName="gnSamA">
        <ToggleStates>
            <telerik:RadButtonToggleState ImageUrl="~/Study/tasks/sam/css/jq_sam_img/samA0.png" />
            <telerik:RadButtonToggleState ImageUrl="~/Study/tasks/sam/css/jq_sam_img/samA0-selected.png" Selected="true"/>
        </ToggleStates>
    </telerik:RadButton>

    Now when I over the button with the mouse, or when I leave the button, the image quickly disappear and then comes back.
    I have been through this pretty interesting post, but no luck :/

    Any one idea ?

    Chris
  2. Answer
    Danail Vasilev
    Admin
    Danail Vasilev avatar
    1494 posts

    Posted 12 Mar 2013 Link to this post

    Hi Chris,

    There is an issue with the RadButton (used as an Image Button) when it is being hovered/unhovered in Chrome. For some reason Chrome makes image requests for each state of the button - normal and hovered.

    I have logged this issue in our feedback portal here, so that you can monitor, comment or raise it priority by voting on it.

    For the time being instead of setting the ImageUrl property to each toggle state of the RadButton you can set a background image to the span wrapper and remove the sprite of the inner span. You can refer to the example I have created below:
    CSS:
    <style type="text/css">
        span.RadButton.class1
        {
            background-image: url('~/Study/tasks/sam/css/jq_sam_img/samA0.png');
        }
        span.RadButton.class1 span
        {
            background-image: none;
        }
         
         
        span.RadButton.class2
        {
            background-image: url('~/Study/tasks/sam/css/jq_sam_img/samA0.png');
        }
         
        span.RadButton.class2 span
        {
            background-image: none;
        }
    </style>
    ASPX:
    <telerik:RadButton ID="RadButton" runat="server" Width="30px" Height="30px" ToggleType="CheckBox"
        ButtonType="ToggleButton" AutoPostBack="false">
        <ToggleStates>
            <telerik:RadButtonToggleState CssClass="class1" />
            <telerik:RadButtonToggleState CssClass="class2" Selected="true" />
        </ToggleStates>
    </telerik:RadButton>

    I have also updated your Telerik points for reporting this issue.


    Greetings,
    Danail Vasilev
    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.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. DuelingCats
    DuelingCats avatar
    49 posts
    Member since:
    Jul 2012

    Posted 12 Jun 2013 Link to this post

    Is this issue still being worked on? I just want to know if Telerik still has this fix for us at some point.
  5. Danail Vasilev
    Admin
    Danail Vasilev avatar
    1494 posts

    Posted 13 Jun 2013 Link to this post

    Hi Justin,

    I am sorry to say that currently I cannot provide any time estimates for the fix of this issue, due to the prioritized tasks of our developers. What I can suggest you for the time being is to use the provided workaround and follow the feedback item, so that once the issue is resolved you can be notified.

    Regards,
    Danail Vasilev
    Telerik
    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 the blog feed now.
Back to Top