Fix the jagged text appearance under IE

Thread is closed for posting
8 posts, 0 answers
  1. 63F75A2C-1F16-4AED-AFE8-B1BBD57646AD
    63F75A2C-1F16-4AED-AFE8-B1BBD57646AD avatar
    1572 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. B029C185-2B77-4795-804A-3F63C00B8BEA
    B029C185-2B77-4795-804A-3F63C00B8BEA 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. 93662917-1E03-49EC-9286-033C9D1BF79E
    93662917-1E03-49EC-9286-033C9D1BF79E avatar
    1406 posts
    Member since:
    May 2014

    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. 3E4DCEB8-D62E-45CF-BDA0-8A450979C4AB
    3E4DCEB8-D62E-45CF-BDA0-8A450979C4AB 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. 3C21D7AC-FCE0-4CC2-8BF3-52BE9C56A8D5
    3C21D7AC-FCE0-4CC2-8BF3-52BE9C56A8D5 avatar
    2150 posts
    Member since:
    Oct 2016

    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. AA1DA7FC-B512-45F9-8017-E0031B64CD0A
    AA1DA7FC-B512-45F9-8017-E0031B64CD0A 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. 628A4A27-6F6C-4985-B975-D0F2A1FA322F
    628A4A27-6F6C-4985-B975-D0F2A1FA322F 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. 3C21D7AC-FCE0-4CC2-8BF3-52BE9C56A8D5
    3C21D7AC-FCE0-4CC2-8BF3-52BE9C56A8D5 avatar
    2150 posts
    Member since:
    Oct 2016

    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

This Code Library is part of the product documentation and subject to the respective product license agreement.