This is a migrated thread and some comments may be shown as answers.
RadButton Image flickers on over in Chrome
3 Answers 29 Views
This is a migrated thread and some comments may be shown as answers.
Christophe
Top achievements
Rank 1
Christophe asked on 08 Mar 2013, 05:20 AM
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

3 Answers, 1 is accepted

Sort by
0
Accepted
Danail Vasilev
Telerik team
answered on 12 Mar 2013, 06:21 PM
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.
0
DuelingCats
Top achievements
Rank 2
answered on 12 Jun 2013, 05:20 PM
Is this issue still being worked on? I just want to know if Telerik still has this fix for us at some point.
0
Danail Vasilev
Telerik team
answered on 13 Jun 2013, 02:47 PM
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.
Asked by
Christophe
Top achievements
Rank 1
Answers by
Danail Vasilev
Telerik team
DuelingCats
Top achievements
Rank 2
Share this question
or