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

set opacity browser sniffing necessary in Dom utility?

Expand Messages
  • Peter Michaux
    Hi, Reading the Dom utility I see the following in setStyle() case opacity : if (isIE && typeof el.style.filter == string ) { // in case not appended
    Message 1 of 14 , Sep 4, 2006
      Hi,

      Reading the Dom utility I see the following in setStyle()

      case 'opacity' :
      if (isIE && typeof el.style.filter == 'string') { // in case not appended

      Earlier in the library isIE is defined with

      var isIE = (window.ActiveXObject);

      Why is it necessary to check for window.ActiveXObject when setting
      opacity? Could the conditional be dropped to just the following?

      if (typeof el.style.filter == 'string')

      Thank you,
      Peter
    • harrykiri
      I m struggeling with the same issue as Peter does. Actually my application breaks on this method. Could some explain what this method exactly does? I gasped at
      Message 2 of 14 , Sep 5, 2006
        I'm struggeling with the same issue as Peter does. Actually my
        application breaks on this method. Could some explain what this method
        exactly does? I gasped at the code but didn't quite understood what
        this method does...

        Can this method be overruled by prototyping it?

        Kind regards,


        Jeroen

        --- In ydn-javascript@yahoogroups.com, "Peter Michaux"
        <petermichaux@...> wrote:
        >
        > Hi,
        >
        > Reading the Dom utility I see the following in setStyle()
        >
        > case 'opacity' :
        > if (isIE && typeof el.style.filter == 'string') { // in case not
        appended
        >
        > Earlier in the library isIE is defined with
        >
        > var isIE = (window.ActiveXObject);
        >
        > Why is it necessary to check for window.ActiveXObject when setting
        > opacity? Could the conditional be dropped to just the following?
        >
        > if (typeof el.style.filter == 'string')
        >
        > Thank you,
        > Peter
        >
      • Matt Sweeney
        Hi Peter, Some code (outside of YUI) applies element.style.filter to all browsers when setting filters for IE, which breaks opacity in Dom.setStyle for other
        Message 3 of 14 , Sep 5, 2006
          Hi Peter,

          Some code (outside of YUI) applies "element.style.filter" to all
          browsers when setting filters for IE, which breaks opacity in
          Dom.setStyle for other browsers. The IE check assures that we only set
          opacity via filters for IE, allowing other browsers to fall through.

          Matt

          Peter Michaux wrote:

          >Hi,
          >
          >Reading the Dom utility I see the following in setStyle()
          >
          > case 'opacity' :
          > if (isIE && typeof el.style.filter == 'string') { // in case not appended
          >
          >Earlier in the library isIE is defined with
          >
          > var isIE = (window.ActiveXObject);
          >
          >Why is it necessary to check for window.ActiveXObject when setting
          >opacity? Could the conditional be dropped to just the following?
          >
          > if (typeof el.style.filter == 'string')
          >
          >Thank you,
          >Peter
          >
          >
          >
          >Yahoo! Groups Links
          >
          >
          >
          >
          >
          >
          >
          >
          >
          >
          >
        • Matt Sweeney
          Hi Jeroen, ... The Dom.setStyle method sets CSS style rules for HTML elements. This is normally just done via the element.style property, except for
          Message 4 of 14 , Sep 5, 2006
            Hi Jeroen,

            Could some explain what this method
             exactly does?
            The Dom.setStyle method sets CSS style rules for HTML elements.  This is normally just done via the "element.style" property, except for opacity, which is normalized for IE.

            Can you elaborate on what issues you are having?

            Thanks,

            Matt

            harrykiri wrote:
            I'm struggeling with the same issue as Peter does. Actually my
            application breaks on this method. Could some explain what this method
             exactly does? I gasped at the code but didn't quite understood what
            this method does...
            
            Can this method be overruled by prototyping it?
            
            Kind regards,
            
            
            Jeroen
            
            --- In ydn-javascript@yahoogroups.com, "Peter Michaux"
            <petermichaux@...> wrote:
              
            Hi,
            
            Reading the Dom utility I see the following in setStyle()
            
              case 'opacity' :
                if (isIE && typeof el.style.filter == 'string') { // in case not
                
            appended
              
            Earlier in the library isIE is defined with
            
              var isIE = (window.ActiveXObject);
            
            Why is it necessary to check for window.ActiveXObject when setting
            opacity? Could the conditional be dropped to just the following?
            
              if (typeof el.style.filter == 'string')
            
            Thank you,
            Peter
            
                
            
            
            
            
            
            
             
            Yahoo! Groups Links
            
            <*> To visit your group on the web, go to:
                http://groups.yahoo.com/group/ydn-javascript/
            
            <*> To unsubscribe from this group, send an email to:
                ydn-javascript-unsubscribe@yahoogroups.com
            
            <*> Your use of Yahoo! Groups is subject to:
                http://docs.yahoo.com/info/terms/
             
            
            
            
            
            
              

          • Peter Michaux
            Hi ... Can you show an example of how it breaks and in which browser? ... What does that mean exactly? Peter
            Message 5 of 14 , Sep 5, 2006
              Hi

              On 9/5/06, harrykiri <jeroensen@...> wrote:
              >
              > I'm struggeling with the same issue as Peter does. Actually my
              > application breaks on this method. Could some explain what this method
              > exactly does?

              Can you show an example of how it breaks and in which browser?


              > I gasped at the code but didn't quite understood what
              > this method does...

              >
              > Can this method be overruled by prototyping it?

              What does that mean exactly?

              Peter
            • Peter Michaux
              Hi Matt ... Is this other code you mention only internal to other Yahoo! pages? Thank you, Peter
              Message 6 of 14 , Sep 5, 2006
                Hi Matt

                On 9/5/06, Matt Sweeney <msweeney@...> wrote:
                >
                > Hi Peter,
                >
                > Some code (outside of YUI) applies "element.style.filter" to all
                > browsers when setting filters for IE, which breaks opacity in
                > Dom.setStyle for other browsers. The IE check assures that we only set
                > opacity via filters for IE, allowing other browsers to fall through.

                Is this other code you mention only internal to other Yahoo! pages?

                Thank you,
                Peter
              • Matt Sweeney
                Hi Peter, ... This bit of defensive coding wasn t added in response to any specific issue/code. From what I ve seen, many folks will simply either write to
                Message 7 of 14 , Sep 5, 2006
                  Hi Peter,

                  Is this other code you mention only internal to other Yahoo! pages?
                  This bit of defensive coding wasn't added in response to any specific issue/code. 

                  From what I've seen, many folks will simply either write to "style.filter" with no check at because it has no visible impact on other browsers, or will wrap with a cursory if (document.all) or some other weak form of object detection. 

                  Checking explicitly for IE before setting opacity via filter ensures that other browsers also recieve opacity, regardless of the state of "style.filter".

                  In general, object detection is often a brittle solution, because the object can not be trusted to work as advertised.  When in doubt, I prefer to add a bit of browser sniffing to allow proper execution in an many environments as possible.

                  Matt

                  Peter Michaux wrote:
                  Hi Matt
                  
                  On 9/5/06, Matt Sweeney <msweeney@...> wrote:
                    
                  Hi Peter,
                  
                   Some code (outside of YUI) applies "element.style.filter" to all
                   browsers when setting filters for IE, which breaks opacity in
                   Dom.setStyle for other browsers.  The IE check assures that we only set
                   opacity via filters for IE, allowing other browsers to fall through.
                      
                  Is this other code you mention only internal to other Yahoo! pages?
                  
                  Thank you,
                  Peter
                  
                  
                   
                  Yahoo! Groups Links
                  
                  <*> To visit your group on the web, go to:
                      http://groups.yahoo.com/group/ydn-javascript/
                  
                  <*> To unsubscribe from this group, send an email to:
                      ydn-javascript-unsubscribe@yahoogroups.com
                  
                  <*> Your use of Yahoo! Groups is subject to:
                      http://docs.yahoo.com/info/terms/
                   
                  
                  
                  
                  
                    

                • Peter Michaux
                  ... Hi Matt, Thank you for the info. Programming a library for such a wide audience must be a difficult challenge in compromises. I asked Thomas Fuchs of
                  Message 8 of 14 , Sep 5, 2006
                    On 9/5/06, Matt Sweeney <msweeney@...> wrote:
                    >
                    > > Is this other code you mention only internal to other Yahoo! pages?
                    >
                    > This bit of defensive coding wasn't added in response to any specific issue/code.
                    >
                    > From what I've seen, many folks will simply either write to "style.filter" with no check at because it has no visible impact on other browsers, or will wrap with a cursory if (document.all) or some other weak form of object detection.
                    >
                    > Checking explicitly for IE before setting opacity via filter ensures that other browsers also recieve opacity, regardless of the state of "style.filter".
                    >
                    > In general, object detection is often a brittle solution, because the object can not be trusted to work as advertised. When in doubt, I prefer to add a bit of browser sniffing to allow proper execution in an many environments as possible.

                    Hi Matt,

                    Thank you for the info. Programming a library for such a wide audience
                    must be a difficult challenge in compromises.

                    I asked Thomas Fuchs of Scriptaculous about a couple lines his
                    setOpacity function which I have attached below and removed dependence
                    on the $() and other support functions.

                    The following part is apparently for a bug in Firefox <1.5 that caused
                    flicker. I wonder if your use of "-moz-opacity" negates this bug. (I
                    need to find out how to install another version of firefox to test
                    this.)

                    element.style.opacity = (/Gecko/.test(navigator.userAgent) &&
                    !/Konqueror|Safari|KHTML/.test(navigator.userAgent)) ?
                    0.999999 : 1.0;

                    The line "if (value < 0.00001) {value = 0;} " makes sure that very
                    small values don't translate to a strings like 1.6E-34 which isn't
                    valid in CSS2, I believe. These strange values could be produced in an
                    automated fade out type of animation. Maybe a good defensive line for
                    you to add to your opacity section?

                    I also think the way that Thomas has removed and added the alpha stuff
                    for IE is interesting because it means other filters can stay in
                    place. I don't need this but maybe it is a good safety for your method
                    also?

                    -Peter



                    Element.setOpacity = function(element, value){
                    if (typeof el == 'string') {el = document.getElementById(el);}
                    if (value == 1) {
                    element.style.opacity = (/Gecko/.test(navigator.userAgent) &&
                    !/Konqueror|Safari|KHTML/.test(navigator.userAgent)) ?
                    0.999999 : 1.0;
                    if (/MSIE/.test(navigator.userAgent) && !window.opera) {
                    element.style.filter.replace(/alpha\([^\)]*\)/gi,'');
                    }
                    } else {
                    if (value < 0.00001) {value = 0;}
                    element.style.opacity = value;
                    if (/MSIE/.test(navigator.userAgent) && !window.opera) {
                    element.style.filter.replace(/alpha\([^\)]*\)/gi,'') +
                    'alpha(opacity='+value*100+')';
                    }
                    }
                    };
                  • Matt Sweeney
                    Hi Peter, Yes, the gecko flicker is a known issue for older versions. Not wiping out existing filters would be a good addition. I ve also seen rounding issues
                    Message 9 of 14 , Sep 5, 2006
                      Hi Peter,

                      Yes, the gecko flicker is a known issue for older versions.

                      Not wiping out existing filters would be a good addition.  I've also seen rounding issues with animating opacity, and have it on my todo list to limit the number of significant digits for animated opacity.

                      Thanks,

                      Matt

                      Peter Michaux wrote:
                      On 9/5/06, Matt Sweeney <msweeney@...> wrote:
                        
                        Is this other code you mention only internal to other Yahoo! pages?
                            
                        This bit of defensive coding wasn't added in response to any specific issue/code.
                      
                       From what I've seen, many folks will simply either write to "style.filter" with no check at because it has no visible impact on other browsers, or will wrap with a cursory if (document.all) or some other weak form of object detection.
                      
                       Checking explicitly for IE before setting opacity via filter ensures that other browsers also recieve opacity, regardless of the state of "style.filter".
                      
                       In general, object detection is often a brittle solution, because the object can not be trusted to work as advertised.  When in doubt, I prefer to add a bit of browser sniffing to allow proper execution in an many environments as possible.
                          
                      Hi Matt,
                      
                      Thank you for the info. Programming a library for such a wide audience
                      must be a difficult challenge in compromises.
                      
                      I asked Thomas Fuchs of Scriptaculous about a couple lines his
                      setOpacity function which I have attached below and removed dependence
                      on the $() and other support functions.
                      
                      The following part is apparently for a bug in Firefox <1.5 that caused
                      flicker. I wonder if your use of "-moz-opacity" negates this bug. (I
                      need to find out how to install another version of firefox to test
                      this.)
                      
                          element.style.opacity = (/Gecko/.test(navigator.userAgent) &&
                                               !/Konqueror|Safari|KHTML/.test(navigator.userAgent)) ?
                                               0.999999 : 1.0;
                      
                      The line "if (value < 0.00001) {value = 0;} " makes sure that very
                      small values don't translate to a strings like 1.6E-34 which isn't
                      valid in CSS2, I believe. These strange values could be produced in an
                      automated fade out type of animation. Maybe a good defensive line for
                      you to add to your opacity section?
                      
                      I also think the way that Thomas has removed and added the alpha stuff
                      for IE is interesting because it means other filters can stay in
                      place. I don't need this but maybe it is a good safety for your method
                      also?
                      
                      -Peter
                      
                      
                      
                      Element.setOpacity = function(element, value){
                        if (typeof el == 'string') {el = document.getElementById(el);}
                        if (value == 1) {
                          element.style.opacity = (/Gecko/.test(navigator.userAgent) &&
                                               !/Konqueror|Safari|KHTML/.test(navigator.userAgent)) ?
                                               0.999999 : 1.0;
                          if (/MSIE/.test(navigator.userAgent) && !window.opera) {
                            element.style.filter.replace(/alpha\([^\)]*\)/gi,'');
                          }
                        } else {
                          if (value < 0.00001) {value = 0;}
                          element.style.opacity = value;
                          if (/MSIE/.test(navigator.userAgent) && !window.opera) {
                            element.style.filter.replace(/alpha\([^\)]*\)/gi,'') +
                                                 'alpha(opacity='+value*100+')';
                          }
                        }
                      };
                      
                      
                       
                      Yahoo! Groups Links
                      
                      <*> To visit your group on the web, go to:
                          http://groups.yahoo.com/group/ydn-javascript/
                      
                      <*> To unsubscribe from this group, send an email to:
                          ydn-javascript-unsubscribe@yahoogroups.com
                      
                      <*> Your use of Yahoo! Groups is subject to:
                          http://docs.yahoo.com/info/terms/
                       
                      
                      
                      
                      
                      
                        

                    • Peter Michaux
                      ... Must be very old versions because Firefox 1.0 on OS X and Win XP seem to work fine if do just element.style.opacity = 1 I imagine people clever enough to
                      Message 10 of 14 , Sep 5, 2006
                        On 9/5/06, Matt Sweeney <msweeney@...> wrote:
                        >
                        > Hi Peter,
                        >
                        > Yes, the gecko flicker is a known issue for older versions.

                        Must be very old versions because Firefox 1.0 on OS X and Win XP seem
                        to work fine if do just

                        element.style.opacity = 1

                        I imagine people clever enough to use Firefox before v1.0 have
                        probably upgraded.

                        -Peter
                      • Scott Schiller
                        Hi Peter, I believe this issue applies to current versions of Firefox as well - the flicker is seen when animating opacity from
                        Message 11 of 14 , Sep 5, 2006
                          Hi Peter,

                          I believe this issue applies to current versions of Firefox as well - the "flicker" is seen when animating opacity from <1 to 1. I believe in the case of a fade-in  (Y! Photos slideshow,) we found that end opacity to 0.999 as suggested gives effectively opaque display, but without the flicker. This looks to be what Thomas has concluded with also.

                          I haven't tried this, but I wonder if setting opacity to "auto" or default, or if somehow removing it altogether (instead of 0.999 or 1) might effectively "reset" the image, removing opacity without the flicker. (Maybe 1 does effectively this, and the flicker effect is a result.) Either way, iIn extreme cases or where large semi-opaque elements are being rendered and potentially left at 0.999, this might really hurt performance given those elements are still partially opaque.


                          Scott Schiller
                          Front-end Engineer, Yahoo! Photos

                          ----- Original Message ----
                          From: Peter Michaux <petermichaux@...>
                          To: ydn-javascript@yahoogroups.com
                          Sent: Tuesday, September 5, 2006 5:10:08 PM
                          Subject: Re: [ydn-javascript] set opacity browser sniffing necessary in Dom utility?

                          On 9/5/06, Matt Sweeney <msweeney@...> wrote:
                          >
                          >     Hi Peter,
                          >
                          >  Yes, the gecko flicker is a known issue for older versions.

                          Must be very old versions because Firefox 1.0 on OS X and Win XP seem
                          to work fine if do just

                            element.style.opacity = 1

                          I imagine people clever enough to use Firefox before v1.0 have
                          probably upgraded.

                          -Peter



                          Yahoo! Groups Links

                          <*> To visit your group on the web, go to:
                              http://groups.yahoo.com/group/ydn-javascript/

                          <*> To unsubscribe from this group, send an email to:
                              ydn-javascript-unsubscribe@yahoogroups.com

                          <*> Your use of Yahoo! Groups is subject to:
                              http://docs.yahoo.com/info/terms/






                        • Matt Sweeney
                          This issue is fixed in FF 1.0.7 and 1.5.
                          Message 12 of 14 , Sep 5, 2006
                            This issue is fixed in FF 1.0.7 and 1.5.

                            Scott Schiller wrote:
                            Hi Peter,

                            I believe this issue applies to current versions of Firefox as well - the "flicker" is seen when animating opacity from <1 to 1. I believe in the case of a fade-in  (Y! Photos slideshow,) we found that end opacity to 0.999 as suggested gives effectively opaque display, but without the flicker. This looks to be what Thomas has concluded with also.

                            I haven't tried this, but I wonder if setting opacity to "auto" or default, or if somehow removing it altogether (instead of 0.999 or 1) might effectively "reset" the image, removing opacity without the flicker. (Maybe 1 does effectively this, and the flicker effect is a result.) Either way, iIn extreme cases or where large semi-opaque elements are being rendered and potentially left at 0.999, this might really hurt performance given those elements are still partially opaque.


                            Scott Schiller
                            Front-end Engineer, Yahoo! Photos

                            ----- Original Message ----
                            From: Peter Michaux <petermichaux@...>
                            To: ydn-javascript@yahoogroups.com
                            Sent: Tuesday, September 5, 2006 5:10:08 PM
                            Subject: Re: [ydn-javascript] set opacity browser sniffing necessary in Dom utility?

                            On 9/5/06, Matt Sweeney <msweeney@...> wrote:
                            >
                            >     Hi Peter,
                            >
                            >  Yes, the gecko flicker is a known issue for older versions.

                            Must be very old versions because Firefox 1.0 on OS X and Win XP seem
                            to work fine if do just

                              element.style.opacity = 1

                            I imagine people clever enough to use Firefox before v1.0 have
                            probably upgraded.

                            -Peter



                            Yahoo! Groups Links

                            <*> To visit your group on the web, go to:
                                http://groups.yahoo.com/group/ydn-javascript/

                            <*> To unsubscribe from this group, send an email to:
                                ydn-javascript-unsubscribe@yahoogroups.com

                            <*> Your use of Yahoo! Groups is subject to:
                                http://docs.yahoo.com/info/terms/







                          • Peter Michaux
                            Hi Scott, ... Do you have a simple little example that shows the problem? I would like to experiement with this a bit. ... The the versions of Scriptaculous
                            Message 13 of 14 , Sep 5, 2006
                              Hi Scott,


                              On 9/5/06, Scott Schiller <idliketowork@...> wrote:
                              >
                              > I believe this issue applies to current versions of Firefox as well - the "flicker" is seen when animating opacity from <1 to 1. I believe in the case of a fade-in (Y! Photos slideshow,) we found that end opacity to 0.999 as suggested gives effectively opaque display, but without the flicker. This looks to be what Thomas has concluded with also.

                              Do you have a simple little example that shows the problem? I would
                              like to experiement with this a bit.


                              > I haven't tried this, but I wonder if setting opacity to "auto" or default, or if somehow removing it altogether (instead of 0.999 or 1) might effectively "reset" the image, removing opacity without the flicker. (Maybe 1 does effectively this, and the flicker effect is a result.) Either way, iIn extreme cases or where large semi-opaque elements are being rendered and potentially left at 0.999, this might really hurt performance given those elements are still partially opaque.

                              The the versions of Scriptaculous before 1.6.3 (released today) did
                              set opacity to null in the Gecko browsers.

                              (/Gecko/.test(navigator.userAgent) &&
                              !/Konqueror|Safari|KHTML/.test(navigator.userAgent)) ?
                              0.999999 : null });

                              I asked about the reason behind the change but Thomas hasn't replied
                              yet. I hope he does.

                              Thanks,
                              Peter
                            • Peter Michaux
                              Hi Matt, ... This sparked and interesting discussion on comp.lang.javascript. Here are a couple excerpts you might find interesting.
                              Message 14 of 14 , Sep 9, 2006
                                Hi Matt,

                                > > case 'opacity' :
                                > > if (isIE && typeof el.style.filter == 'string') { // in case not appended
                                > >
                                > >Earlier in the library isIE is defined with
                                > >
                                > > var isIE = (window.ActiveXObject);
                                > >
                                > > Why is it necessary to check for window.ActiveXObject when setting
                                > > opacity? Could the conditional be dropped to just the following?
                                > >
                                > > if (typeof el.style.filter == 'string')
                                >
                                > Is this other code you mention only internal to other Yahoo! pages?
                                >
                                > This bit of defensive coding wasn't added in response to any specific issue/code.
                                >
                                > From what I've seen, many folks will simply either write to "style.filter" with no check at because it has no visible impact on other browsers, or will wrap with a cursory if (document.all) or some other weak form of object detection.
                                >
                                > Checking explicitly for IE before setting opacity via filter ensures that other browsers also recieve opacity, regardless of the state of "style.filter".
                                >
                                > In general, object detection is often a brittle solution, because the object can not be trusted to work as advertised. When in doubt, I prefer to add a bit of browser sniffing to allow proper execution in an many environments as possible.


                                This sparked and interesting discussion on comp.lang.javascript. Here
                                are a couple excerpts you might find interesting.

                                http://groups.google.com/group/comp.lang.javascript/msg/9ff566e846b61f5c

                                Too many browsers have a global ActiveXObjet constructor (real
                                or object inference defeating dummy) for testing it in any context other
                                than a desire to instantiate an ActiveX object

                                http://groups.google.com/group/comp.lang.javascript/msg/6062e0a4bf9e7fb5

                                It would be enough to observe that in browser supporting -
                                style.filter - the TITLE element is accessible, has a - style - object
                                and that object has a testable - filter - property that is a string. It
                                would be insane for anyone to directly set a filter on an element that
                                has no visible manifestation in a page so testing that property may be
                                the test closet to the issue where the possibility of other scripts
                                assigning to - style.filter - exists.

                                http://groups.google.com/group/comp.lang.javascript/msg/e4ee76a3d5d1c0c1

                                The TITLE element is the only element that is _required_ in a valid HTML
                                document. And they are error-corrected into existence if omitted on
                                actual browsers (including IE).
                              Your message has been successfully submitted and would be delivered to recipients shortly.