Community & Support
Skip Navigation LinksHome / Community & Support / Developer Productivity Tools Forums / ASP.NET AJAX > PanelBar > Flicking issue on panel

Not answered Flicking issue on panel

Feed from this thread
  • Gokhan avatar

    Posted on Jan 14, 2010 (permalink)

    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
    Attached files

    Reply

  • Tsvetomir Tsonev Tsvetomir Tsonev admin's avatar

    Posted on Jan 18, 2010 (permalink)

    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.

    Reply

  • Gokhan avatar

    Posted on Jan 18, 2010 (permalink)

    hi;

    i am using Firefox 3.5.7 on Mac Leopard and Tiger Mac Osx

    Reply

  • Yana Yana admin's avatar

    Posted on Jan 21, 2010 (permalink)

    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.

    Reply

  • Gokhan avatar

    Posted on Jan 21, 2010 (permalink)

    Hi;

    i have uploaded the sample movie on



    thanx

    Reply

  • Kamen Bundev Kamen Bundev avatar

    Posted on Jan 22, 2010 (permalink)

    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.

    Reply

  • Ben Amada avatar

    Posted on Feb 24, 2010 (permalink)

    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

    Reply

  • Kamen Bundev Kamen Bundev avatar

    Posted on Feb 25, 2010 (permalink)

    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.

    Reply

  • Ben Amada avatar

    Posted on Feb 25, 2010 (permalink)

    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> 
     

    Reply

  • Ben Amada avatar

    Posted on Mar 2, 2010 (permalink)

    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?

    Reply

  • Kamen Bundev Kamen Bundev avatar

    Posted on Mar 3, 2010 (permalink)

    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.

    Reply

  • Ben Amada avatar

    Posted on Mar 3, 2010 (permalink)

    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.

    Reply

  • Kamen Bundev Kamen Bundev avatar

    Posted on Mar 9, 2010 (permalink)

    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.
    Attached files

    Reply

  • Ben Amada avatar

    Posted on Mar 16, 2010 (permalink)

    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.

    Reply

    • Q1 Webinar Week

Back to Top

Skip Navigation LinksHome / Community & Support / Developer Productivity Tools Forums / ASP.NET AJAX > PanelBar > Flicking issue on panel
Related resources for "Flicking issue on panel"

[  ASP.NET PanelBar Features  |  Documentation  |  Demos  |  Telerik TV  |  Self-Paced Trainer  |  Step-by-step Tutorial  ]