[Solved] RadButton Image flickers on over in Chrome

[Christophe]

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

[Danail Vasilev]

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

[DuelingCats]

Is this issue still being worked on? I just want to know if Telerik still has this fix for us at some point.

[Danail Vasilev]

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