Loading ...
Sorry, an error occurred while loading the content.

Re: [ydn-javascript] Weird font pixelation/bitmap effect on animation - IE7

Expand Messages
  • dav.glass@yahoo.com
    Max -- Try adding a background color to the div s: toggler_1 & toggler_2 Dav Dav Glass dav.glass@yahoo.com blog.davglass.com + Windows: n. - The most
    Message 1 of 6 , Oct 1, 2007
    View Source
    • 0 Attachment
      Max --

      Try adding a background color to the div's: toggler_1 & toggler_2

      Dav
       
      Dav Glass
      dav.glass@...
      blog.davglass.com
       
       
      + Windows: n. - The most successful computer virus, ever. +
      + A computer without a Microsoft operating system is like a dog
      without bricks tied to its head +
      + A Microsoft Certified Systems Engineer is to computing what a
      McDonalds Certified Food Specialist is to fine cuisine +


      ----- Original Message ----
      From: max.case <max.case@...>
      To: ydn-javascript@yahoogroups.com
      Sent: Monday, October 1, 2007 12:16:12 PM
      Subject: [ydn-javascript] Weird font pixelation/bitmap effect on animation - IE7

      Hi.

      Hoping someone can help me figure out why this is happening.

      Problem: I have a toggler that shows/hides content. Works fine on
      FF/Safari, but on IE7, when you show the content (via changing
      opacity), any text in a header (<h3> for example) becomes
      pixelated/bit- mappy. Can't figure out why this is happening.
      Looking for help as to whats (or where I'm ) going wrong, as well as
      any potential work-arounds people might know of.

      Example Page:
      http://plankdesign. com/lab/toggler/

      thanks,
      Max.


    • Max Case
      Thanks Dav, I guess I didn t delete my post fast enough. 2 mins after I posted, I stumbled on the answer (I got so used to searching the list archive via my
      Message 2 of 6 , Oct 1, 2007
      View Source
      • 0 Attachment
        Thanks Dav,
        I guess I didn't delete my post fast enough. 2 mins after I posted, I
        stumbled on the answer (I got so used to searching the list archive
        via my gmail, I forgot that I don't have the full history of this list
        in there, which is where the answer was in the end :) )

        max.

        --- In ydn-javascript@yahoogroups.com, dav.glass@... wrote:
        >
        > Max --
        >
        > Try adding a background color to the div's: toggler_1 & toggler_2
        >
        > Dav
        >
        > Dav Glass
        > dav.glass@...
        > blog.davglass.com
        >
      • Max Case
        Does anyone know if there s anyting else that can be done for this problem, other than adding a background-color? The problem is, I have a BG image in the div
        Message 3 of 6 , Oct 24, 2007
        View Source
        • 0 Attachment
          Does anyone know if there's anyting else that can be done for this
          problem, other than adding a background-color?
          The problem is, I have a BG image in the div the text is sitting in,
          so setting the bgcolor obscures some of this image.
          I tried setting the background-color to transparent, but that doesn't
          work.

          Thanks,
          Max.


          --- In ydn-javascript@yahoogroups.com, dav.glass@... wrote:
          >
          > Max --
          >
          > Try adding a background color to the div's: toggler_1 & toggler_2
          >
          > Dav
          >
          > Dav Glass
          > dav.glass@...
          > blog.davglass.com
        • alexshusta
          Microsoft changed how ClearType fonts are handled in IE7, one of those changes was to remove all font-smoothing on elements that have been positioned or had a
          Message 4 of 6 , Dec 16, 2007
          View Source
          • 0 Attachment
            Microsoft changed how ClearType fonts are handled in IE7, one of those changes was to remove all font-smoothing on elements that have been positioned or had a filter (e.g. YUI's handling of opacity) applied to them.

            The outcome is that fonts on IE7 look, shall we say, oldschool, when they're within an element that has been positioned or animated.

            Here are a couple links that offer background information, and an example:
            http://blogs.msdn.com/ie/archive/2006/08/31/730887.aspx 

            http://buymeasoda.com/dev/issues/ie_cleartype/ie_cleartype.html 

            I don't have a sure-fire solution to fix the problem on hand, but thought you might be interested to know what's causing the issue.

            ~Alexander



            --- In ydn-javascript@yahoogroups.com, "Max Case" <max.case@...> wrote:
            >
            > Does anyone know if there's anyting else that can be done for this
            > problem, other than adding a background-color?
            > The problem is, I have a BG image in the div the text is sitting in,
            > so setting the bgcolor obscures some of this image.
            > I tried setting the background-color to transparent, but that doesn't
            > work.
            >
            > Thanks,
            > Max.
            >
            >
            > --- In ydn-javascript@yahoogroups.com, dav.glass@ wrote:
            > >
            > > Max --
            > >
            > > Try adding a background color to the div's: toggler_1 & toggler_2
            > >
            > > Dav
            > >
            > > Dav Glass
            > > dav.glass@
            > > blog.davglass.com
            >
          • dav.glass@yahoo.com
            You might want to try and add a background color to the element that you are animating the opacity of.. Dav Dav Glass dav.glass@yahoo.com blog.davglass.com +
            Message 5 of 6 , Dec 16, 2007
            View Source
            • 0 Attachment
              You might want to try and add a background color to the element that you are animating the opacity of..

              Dav
               
              Dav Glass
              dav.glass@...
              blog.davglass.com
               
               
              + Windows: n. - The most successful computer virus, ever. +
              + A computer without a Microsoft operating system is like a dog
              without bricks tied to its head +
              + A Microsoft Certified Systems Engineer is to computing what a
              McDonalds Certified Food Specialist is to fine cuisine +


              ----- Original Message ----
              From: alexshusta <alexshusta@...>
              To: ydn-javascript@yahoogroups.com
              Sent: Sunday, December 16, 2007 10:35:16 AM
              Subject: [ydn-javascript] Re: Weird font pixelation/bitmap effect on animation - IE7

              Microsoft changed how ClearType fonts are handled in IE7, one of those changes was to remove all font-smoothing on elements that have been positioned or had a filter (e.g. YUI's handling of opacity) applied to them.

              The outcome is that fonts on IE7 look, shall we say, oldschool, when they're within an element that has been positioned or animated.

              Here are a couple links that offer background information, and an example:
              http://blogs.msdn.com/ie/archive/2006/08/31/730887.aspx 

              http://buymeasoda.com/dev/issues/ie_cleartype/ie_cleartype.html 

              I don't have a sure-fire solution to fix the problem on hand, but thought you might be interested to know what's causing the issue.

              ~Alexander



              --- In ydn-javascript@yahoogroups.com, "Max Case" <max.case@...> wrote:
              >
              > Does anyone know if there's anyting else that can be done for this
              > problem, other than adding a background-color?
              > The problem is, I have a BG image in the div the text is sitting in,
              > so setting the bgcolor obscures some of this image.
              > I tried setting the background-color to transparent, but that doesn't
              > work.
              >
              > Thanks,
              > Max.
              >
              >
              > --- In ydn-javascript@yahoogroups.com, dav.glass@ wrote:
              > >
              > > Max --
              > >
              > > Try adding a background color to the div's: toggler_1 & toggler_2
              > >
              > > Dav
              > >
              > > Dav Glass
              > > dav.glass@
              > > blog.davglass.com
              >

            • soloracing2k
              In IE7 this workaround doesn t work for me. But i tried the fix propose here. http://mattberseth.com/blog/2007/12/ie7_cleartype_dximagetransform.html I saw
              Message 6 of 6 , Aug 25, 2008
              View Source
              • 0 Attachment
                In IE7 this workaround doesn't work for me.
                But i tried the fix propose here.
                http://mattberseth.com/blog/2007/12/ie7_cleartype_dximagetransform.html

                I saw that if I remove the filter after the animation completes, this
                weird effect goes away.

                ...
                function removeFilter(element)
                {
                if (element.style.filter && element.style.removeAttribute)
                {
                element.style.removeAttribute('filter');
                }
                }
                ...

                Wouldn't it we useful to add this to yui code? (I don't know where
                exactly).


                --- In ydn-javascript@yahoogroups.com, dav.glass@... wrote:
                >
                > You might want to try and add a background color to the element that
                you are animating the opacity of..
                >
                > Dav
                >
                > Dav Glass
                > dav.glass@...
                > blog.davglass.com
                >
                > + Windows: n. - The most successful computer virus, ever. +
                > + A computer without a Microsoft operating system is like a dog
                > without bricks tied to its head +
                > + A Microsoft Certified Systems Engineer is to computing what a
                > McDonalds Certified Food Specialist is to fine cuisine +
                >
                > ----- Original Message ----
                > From: alexshusta <alexshusta@...>
                > To: ydn-javascript@yahoogroups.com
                > Sent: Sunday, December 16, 2007 10:35:16 AM
                > Subject: [ydn-javascript] Re: Weird font pixelation/bitmap effect on
                animation - IE7
                >
                >
                >
                >
                >
                >
                >
                >
                > <!--
                >
                > #ygrp-mkp{
                > border:1px solid #d8d8d8;font-family:Arial;margin:14px
                0px;padding:0px 14px;}
                > #ygrp-mkp hr{
                > border:1px solid #d8d8d8;}
                > #ygrp-mkp #hd{
                >
                color:#628c2a;font-size:85%;font-weight:bold;line-height:122%;margin:10px
                0px;}
                > #ygrp-mkp #ads{
                > margin-bottom:10px;}
                > #ygrp-mkp .ad{
                > padding:0 0;}
                > #ygrp-mkp .ad a{
                > color:#0000ff;text-decoration:none;}
                > -->
                >
                >
                >
                >
                > Microsoft changed how ClearType fonts are handled in IE7, one of
                those changes was to remove all font-smoothing on elements that have
                been positioned or had a filter (e.g. YUI's handling of opacity)
                applied to them.
                >
                > The outcome is that fonts on IE7 look, shall we say, oldschool, when
                they're within an element that has been positioned or animated.
                >
                > Here are a couple links that offer background information, and an
                example:
                > http://blogs.msdn.com/ie/archive/2006/08/31/730887.aspx
                >
                > http://buymeasoda.com/dev/issues/ie_cleartype/ie_cleartype.html
                >
                > I don't have a sure-fire solution to fix the problem on hand, but
                thought you might be interested to know what's causing the issue.
                >
                > ~Alexander
                >
                >
                > --- In ydn-javascript@yahoogroups.com, "Max Case" <max.case@> wrote:
                > >
                > > Does anyone know if there's anyting else that can be done for this
                > > problem, other than adding a background-color?
                > > The problem is, I have a BG image in the div the text is sitting in,
                > > so setting the bgcolor obscures some of this image.
                > > I tried setting the background-color to transparent, but that doesn't
                > > work.
                > >
                > > Thanks,
                > > Max.
                > >
                > >
                > > --- In ydn-javascript@yahoogroups.com, dav.glass@ wrote:
                > > >
                > > > Max --
                > > >
                > > > Try adding a background color to the div's: toggler_1 & toggler_2
                > > >
                > > > Dav
                > > >
                > > > Dav Glass
                > > > dav.glass@
                > > > blog.davglass.com
                > >
                >
              Your message has been successfully submitted and would be delivered to recipients shortly.