Fix the jagged text appearance under IE

8 posts, 0 answers
  1. Telerik Admin
    Telerik Admin avatar
    1679 posts
    Member since:
    Oct 2004

    Posted 01 Jun 2009 Link to this post

    Requirements

    RadControls version RadControls for ASP.NET
    and
    RadControls for ASP.NET AJAX
    .NET version 2.x   and  3.x
    Visual Studio version 2005/2008
    programming language C# / VB.NET
    browser support

    all browsers supported by RadControls


    PROJECT DESCRIPTION
    [Fix the jagged text appearance under IE]

    The PROBLEM

    Unreadable, jagged text appearance under IE browsers. This is a IE specific behavior and you can examine it in the attached project(without any RadControls).

    Before the first rotation :


    After the first rotation :




    The SOLUTION

    That problem is related to the IE browsers only and this is due to a problem with the DirectX filters that these browsers use. Fortunately there is a workaround for that behavior and you just need to use a background color for the showed text. The code bellow demonstrates the described approach :

    <telerik:RadRotator ID="RadRotator1" runat="server" Width="300" ItemWidth="300" Height="200" 
        ItemHeight="200" FrameDuration="2000" ScrollDuration="2000" DataSourceID="XmlDataSource1"
        <ItemTemplate> 
            <div style="width: 300px; height: 200px; font-weight: bold; background-color: #fff"
                <%# XPath("quote") %> 
            </div> 
        </ItemTemplate> 
    </telerik:RadRotator> 


  2. Alex
    Alex avatar
    4 posts
    Member since:
    Mar 2009

    Posted 16 Jun 2009 Link to this post

    That's a little better, the font is not pixelated now, but there is a jump in font-weight after the first rotation has settled. Does that make sense?  Here is my code:

    <telerik:radrotator SlideShowAnimation-Type="Pulse" RotatorType="AutomaticAdvance" ScrollDirection="Down" id="RadRotator1" runat="server" width="250px" height="400px" 
       scrollduration="2500" frameduration="2000" itemheight="50" itemwidth="250" datasourceid="SqlDataSource1"
       <ItemTemplate> 
          <div style="background-color: #FFFFFF; font-weight:bold;">  
              <%#DataBinder.Eval(Container.DataItem, "JobTitle")%><br /> 
          </div> 
              <%#DataBinder.Eval(Container.DataItem, "Company")%> - <%#DataBinder.Eval(Container.DataItem, "City")%><%#DataBinder.Eval(Container.DataItem, "State")%><br /> 
              <hr /> 
           
       </ItemTemplate> 
    </telerik:radrotator> 
     


    Any ideas?
  3. Fiko
    Admin
    Fiko avatar
    1406 posts

    Posted 17 Jun 2009 Link to this post

    Hi Neil,

    I am afraid this is the best workaround of that undesired IE browsers' behavior. Of course once we have a solution that produces consistent result in all major browsers, we will release it right away.


    Regards,
    Fiko
    the Telerik team

    Instantly find answers to your questions on the new Telerik Support Portal.
    Check out the tips for optimizing your support resource searches.
  4. Jones
    Jones avatar
    14 posts
    Member since:
    Sep 2009

    Posted 18 Sep 2009 Link to this post

    Hello!

    I had this problem as well. With setting the background to white it works well. Is it possible to change the background color of the "DIV" during runtime? I want to mark the selected item. After setting the color of the DIV the change of the color of the item itself does not work. So if it is possible to change the background of the DIV or the Class it would help me a lot.

    Cheers in advance,
  5. Lini
    Admin
    Lini avatar
    2144 posts

    Posted 22 Sep 2009 Link to this post

    Hi,

    The problem described in this thread should be fixed in the current RadControls for ASP.NET AJAX - version 2009.2.826. Please update your project and remove the background color from the rotator item template as it is no longer needed.

    Regards,
    Lini
    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. Ed
    Ed avatar
    124 posts
    Member since:
    Jan 2008

    Posted 20 Nov 2009 Link to this post

    Good stuff, Telerik -- this has solved the problem for me too.  (I was also getting a vertical line immediately to the right of the RadRotator, about 1 pixel wide: I think this was a sliver of the first image.)
  7. Mark Gregor
    Mark Gregor avatar
    15 posts
    Member since:
    Nov 2006

    Posted 01 Apr 2010 Link to this post

    This is still an issue. Using the build recommended in this thread, IE8.  In Slideshow mode, after a fade in transition the text is jagged.  Using no transition animation keeps the smooth text appearance. 
  8. Lini
    Admin
    Lini avatar
    2144 posts

    Posted 08 Apr 2010 Link to this post

    Hi,

    Make sure that you add the background-color style to the text. This will minimize the jagged effect in IE.

    There is no way to remove the effect completely - the incompatibility of clear type and IE filters is intentional - http://blogs.msdn.com/ie/archive/2006/08/31/730887.aspx.

    The only workaround we can offer you is to either disable the fade animation in slideshow mode for IE or use the background color to minimize the effect.

    Sincerely yours,
    Lini
    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.
Back to Top