Flicking issue on panel

14 posts, 0 answers
  1. Gokhan
    Gokhan avatar
    12 posts
    Member since:
    Jul 2008

    Posted 14 Jan 2010 Link to this post

    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
  2. T. Tsonev
    Admin
    T. Tsonev avatar
    2772 posts

    Posted 18 Jan 2010 Link to this post

    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.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Gokhan
    Gokhan avatar
    12 posts
    Member since:
    Jul 2008

    Posted 18 Jan 2010 Link to this post

    hi;

    i am using Firefox 3.5.7 on Mac Leopard and Tiger Mac Osx
  5. Yana
    Admin
    Yana avatar
    4554 posts

    Posted 21 Jan 2010 Link to this post

    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.
  6. Gokhan
    Gokhan avatar
    12 posts
    Member since:
    Jul 2008
  7. Kamen Bundev
    Admin
    Kamen Bundev avatar
    1532 posts

    Posted 22 Jan 2010 Link to this post

    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.
  8. Ben Amada
    Ben Amada avatar
    15 posts
    Member since:
    Jan 2010

    Posted 24 Feb 2010 Link to this post

    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
  9. Kamen Bundev
    Admin
    Kamen Bundev avatar
    1532 posts

    Posted 25 Feb 2010 Link to this post

    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.
  10. Ben Amada
    Ben Amada avatar
    15 posts
    Member since:
    Jan 2010

    Posted 25 Feb 2010 Link to this post

    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> 
     
  11. Ben Amada
    Ben Amada avatar
    15 posts
    Member since:
    Jan 2010

    Posted 02 Mar 2010 Link to this post

    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?
  12. Kamen Bundev
    Admin
    Kamen Bundev avatar
    1532 posts

    Posted 03 Mar 2010 Link to this post

    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.
  13. Ben Amada
    Ben Amada avatar
    15 posts
    Member since:
    Jan 2010

    Posted 03 Mar 2010 Link to this post

    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.
  14. Kamen Bundev
    Admin
    Kamen Bundev avatar
    1532 posts

    Posted 09 Mar 2010 Link to this post

    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.
  15. Ben Amada
    Ben Amada avatar
    15 posts
    Member since:
    Jan 2010

    Posted 16 Mar 2010 Link to this post

    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.
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017