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

Flicking issue on panel

13 Answers 99 Views
PanelBar
This is a migrated thread and some comments may be shown as answers.
Gokhan
Top achievements
Rank 2
Gokhan asked on 14 Jan 2010, 02:21 PM
Hi ;

We are using Telerik 2009.3 and using Panelbar . It works perfectly on windows and Mac OS Snow leopard. But it is having a strange flicking issue on MAC 10.4.* + firefox combination. See my screenshot

i have seen related topic on here but coudnt see the solution


Screenshot is attached

13 Answers, 1 is accepted

Sort by
0
T. Tsonev
Telerik team
answered on 18 Jan 2010, 09:59 AM
Hello Gokhan,

Can you tell us which version of Firefox are you using? Thank you.

All the best,
Tsvetomir Tsonev
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.
0
Gokhan
Top achievements
Rank 2
answered on 18 Jan 2010, 10:20 AM
hi;

i am using Firefox 3.5.7 on Mac Leopard and Tiger Mac Osx
0
Yana
Telerik team
answered on 21 Jan 2010, 12:43 PM
Hi Gokhan,

Please excuse us for the delayed reply.

We've tested the panelbar and weren't able to observe the described issue.
Could you please record a video demonstrating the erroneous behavior with Jing for example? Thanks a lot.

Regards,
Yana
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.
0
Gokhan
Top achievements
Rank 2
answered on 21 Jan 2010, 01:03 PM
0
Kamen Bundev
Telerik team
answered on 22 Jan 2010, 02:45 PM
Hello Gokhan,

It seems this issue is happening only when caret browsing is enabled in Firefox (with F7 or with the corresponding permanent option). It seems there is some kind of a bug in OS X where caret browsing also works for links (in Windows and Linux it isn't). To work around this issue, add this CSS rule to your project:
.RadPanelBar .rpRootGroup .rpLink
{
    -moz-user-input: none;
}

Let me know if this helps.

Sincerely yours,
Kamen Bundev
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.
0
Ben Amada
Top achievements
Rank 1
answered on 24 Feb 2010, 09:00 PM
Hello.

I'm also having an ugly flicker problem in Firefox 3.5.8 / Windows.  I have the latest trial version of the ASP.NET AJAX control suite.  The flicker occurs when collapsing or expanding RadPanelItems and when I'm scrolled down to the very bottom of the page (the scrollbar is at the bottom).  The flicker does not occur in IE8 or Chrome.  I've tried the Default, Telerik and Vista themes with the same flicker.

I'd be happy to submit some sample code or a video if this scenario cannot be reproduced on your end.

Ben
0
Kamen Bundev
Telerik team
answered on 25 Feb 2010, 12:54 PM
Hi Ben,

A sample markup, live URL and/or a video would be of great help. Thank you in advance.

Greetings,
Kamen Bundev
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.
0
Ben Amada
Top achievements
Rank 1
answered on 25 Feb 2010, 07:11 PM
I created a simple page which reproduces this.  While creating it, I discovered that this flickering I'm referring to is occurring when there is a Background Image on the page.  The sample code below includes CSS on the <body> tag that points to a BG image.

When you run this, scroll to the bottom of the page, and collapse the panels.  When the panels collapse, the total height of the page becomes shorter and this is when the flickering occurs.  In IE, it's very smooth.  The flickering is in Firefox.  I can shoot a video too if you don't see this flickering on your end.  Thanks in advance.

CODE UPDATED on 3/3/2010 to use a non-animated BG image on the PanelBar links.
<%@ Page Language="C#" AutoEventWireup="true" %> 
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
 
<html xmlns="http://www.w3.org/1999/xhtml"
<head runat="server"
    <title></title
    <style type="text/css"
     
        div.RadPanelBar .rpLink 
        { 
             background-image: url('http://allben.net/misc/telerik/rad_panel_bar_panel_non_animated_bg_default_theme.gif'); 
        } 
         
    </style> 
</head> 
<body style="background:#3C7FAF url(http://col.stc.s-msn.com/br/hp/11/en-us/css/i/bg_blue_2.gif) repeat-x;"
    <form id="form1" runat="server"
    <telerik:RadScriptManager ID="RadScriptManager1" runat="server" EnablePageMethods="true"
        <Scripts> 
            <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.Core.js" /> 
            <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQuery.js" /> 
        </Scripts> 
    </telerik:RadScriptManager> 
    <telerik:RadFormDecorator ID="RadFormDecorator1" runat="server" DecoratedControls="All" EnableEmbeddedSkins="true" Skin="Telerik" /> 
    <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server"
    </telerik:RadAjaxManager> 
    <telerik:RadSkinManager ID="RadSkinManager1" Runat="server" Skin="Telerik"
    </telerik:RadSkinManager> 
     
    <div style="padding:500px 0 20px 0;"
     
            <telerik:RadPanelBar ID="rpbItems" runat="server" ExpandMode="MultipleExpandedItems" Width="70%"
                <ExpandAnimation Type="Linear" Duration="250" /> 
                <CollapseAnimation Type="Linear" Duration="250" /> 
                <Items> 
                    <telerik:RadPanelItem Text="Item 1" Expanded="true"
                        <Items> 
                            <telerik:RadPanelItem> 
                                <ItemTemplate> 
                                     
                                    content<br /> 
                                    content<br /> 
                                    content<br /> 
                                    content<br /> 
                                    content<br /> 
                                    content<br /> 
                                    content<br /> 
                                    content<br /> 
                                    content<br /> 
                                    content<br /> 
                                    content<br /> 
                                    content<br /> 
                                    content<br /> 
                                     
                                </ItemTemplate> 
                            </telerik:RadPanelItem> 
                        </Items> 
                    </telerik:RadPanelItem> 
                    <telerik:RadPanelItem Text="Item 2" Expanded="true"
                        <Items> 
                            <telerik:RadPanelItem> 
                                <ItemTemplate> 
                                 
                                    content<br /> 
                                    content<br /> 
                                    content<br /> 
                                    content<br /> 
                                    content<br /> 
                                    content<br /> 
                                    content<br /> 
                                    content<br /> 
                                    content<br /> 
                                    content<br /> 
                                    content<br /> 
                                    content<br /> 
                                    content<br /> 
                                 
                                 
                                </ItemTemplate> 
                            </telerik:RadPanelItem> 
                        </Items> 
                    </telerik:RadPanelItem> 
                    <telerik:RadPanelItem Text="Item 3" Expanded="true"
                        <Items> 
                            <telerik:RadPanelItem> 
                                <ItemTemplate> 
                                     
                                    content<br /> 
                                    content<br /> 
                                    content<br /> 
                                    content<br /> 
                                    content<br /> 
                                    content<br /> 
                                    content<br /> 
                                    content<br /> 
                                    content<br /> 
                                    content<br /> 
                                    content<br /> 
                                    content<br /> 
                                    content<br /> 
                                     
                                </ItemTemplate> 
                            </telerik:RadPanelItem> 
                        </Items> 
                    </telerik:RadPanelItem> 
                </Items> 
            </telerik:RadPanelBar> 
     
    </div> 
    </form> 
</body> 
</html> 
 
0
Ben Amada
Top achievements
Rank 1
answered on 03 Mar 2010, 03:24 AM
Kamen / Telerik:  Have you had a chance to test the sample code I posted?  Am curious if you are also seeing the flickering, or page re-drawing in Firefox on your end too.  And if so, is there a solution to eliminate this flickering?
0
Kamen Bundev
Telerik team
answered on 03 Mar 2010, 12:07 PM
Hi Ben,

I'm sorry for the late reply, we are busy currently with the next release of RadControls for ASP.NET AJAX which should be rolling out next week.

I've tested your markup and there indeed is some flickering in Firefox. Looks like a very strange issue and it seems related to the animated gif rendering that we use for root item backgrounds and the background color of the body. If you remove the background color only, the issue will go away.

If this doesn't work for you and you are willing to sacrifice the animated gif background of the RadPanelBar, you can open the gif image in a image editor and save only the first frame (or whichever you like) as a png, then override it in you page with:
div.RadPanelBar .rpLink
{
     background-image: url('images/StaticRootItemBg.png');
}


Greetings,
Kamen Bundev
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.
0
Ben Amada
Top achievements
Rank 1
answered on 03 Mar 2010, 06:57 PM
Kamen:  Thanks.  I created a non-animated GIF of the RadPanelBar link's BG image.  The original image is 20 x 600 in dimensions with 23 frames.  The GIF I created has just the single frame.  I applied the CSS and I can see that the panel bars are no longer animated.  However, I'm still getting the flicker in Firefox.  I updated my code above with the latest test code.  The test code is using the CSS you provided, and is pointing to the non-animated GIF I created.

When you have a chance, I'd appreciate if you could take a look and provide any feedback.  Thanks very much.
0
Kamen Bundev
Telerik team
answered on 09 Mar 2010, 11:31 AM
Hello Ben,

I'm attaching the test page along with the converted image that I used. I can't reproduce it here, but it is entirely possible the issue to depend on computing speed, so if you still reproduce it, then the only fix left is to remove the background color of the body element (you can leave the image). Let me know if this helps.

Best wishes,
Kamen Bundev
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.
0
Ben Amada
Top achievements
Rank 1
answered on 16 Mar 2010, 08:04 AM
Thanks Kamen.  I downloaded this last week and tried it out.  With this version too, I'm still seeing the same flickering.  I actually have an above average computer.

I'm currently exploring other possible tools for accordion style functionality.  I did try a jQuery based accordion control and saw the same flicker in Firefox.  There's a couple of others I'm looking at and will see how they do.  It's not an option to remove the BG image on the body since it's a key part of the web design.  I definitely want to improve the situation because I'm using the Panelbar on a page where the Panelbar is at the bottom of the page.  Every time I collapse panes, I get this flicker and it's driving me nuts.  If I find a solution, I'll post it here.  Thanks.
Tags
PanelBar
Asked by
Gokhan
Top achievements
Rank 2
Answers by
T. Tsonev
Telerik team
Gokhan
Top achievements
Rank 2
Yana
Telerik team
Kamen Bundev
Telerik team
Ben Amada
Top achievements
Rank 1
Share this question
or