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

[BUG] YAHOO.util.Dom.getXY returns 5 different results in 5 browsers

Expand Messages
  • peychevi
    Hello, The problem - I tried to get XY position of the element with position center in LayoutManager. Unfortunately, the results in browsers are different,
    Message 1 of 6 , Jun 20, 2008
      Hello,
      The problem - I tried to get XY position of the element with position 'center' in LayoutManager. Unfortunately, the results in browsers are different, despite the page mode is strict.

      Also, you have to update Dom.getXY function anyway. As you know, in Firefox 3 there is already "getBoundingClientRect"  function, but getXY function in Dom.js thinks it is only for Internet Explorer.

      I already created a bug at SourceForge.net, but I wanted to discuss ithere in order to check is there a quick way to fix this issue. The bug is here, I also prepared a test page:
      http://sourceforge.net/tracker/index.php?func=detail&aid=1998720&group_id=165715&atid=836476
       YUI version is 2.5.2

      Regards,
      Iliyan Peychev
    • Matt Sweeney
      Hi Iliyan, ... The couple pixel diffs you are seeing x-browser are due to discrepancies regarding the origin of the viewport. This shouldn t affect your
      Message 2 of 6 , Jun 24, 2008
        Hi Iliyan,
        >
        > The problem - I tried to get XY position of the element with position
        > 'center' in LayoutManager. Unfortunately, the results in browsers are
        > different, despite the page mode is strict.
        The couple pixel diffs you are seeing x-browser are due to discrepancies
        regarding the origin of the viewport. This shouldn't affect your layout
        though, as within each browser getXY and setXY are skewed by the same
        2-4 pixel diff. We are working on pixel perfect precision for a future
        version.
        >
        > Also, you have to update Dom.getXY function anyway. As you know, in
        > Firefox 3 there is already "getBoundingClientRect" function, but
        > getXY function in Dom.js thinks it is only for Internet Explorer.
        This is not actually true. We use feature detection to determine
        browser capabilities whenever possible. In this case, any browser that
        implements the getBoundingClientRect method (including Firefox 3 and
        Opera 9.5) will fall into that branch and use getBoundingClientRect
        method for more accurate positioning.
        >
        > I already created a bug at SourceForge.net, but I wanted to discuss
        > ithere in order to check is there a quick way to fix this issue. The
        > bug is here, I also prepared a test page:
        > http://sourceforge.net/tracker/index.php?func=detail&aid=1998720&group_id=165715&atid=836476
        > <http://sourceforge.net/tracker/index.php?func=detail&aid=1998720&group_id=165715&atid=836476>
        >
        Thanks for the report. We will add this case to our tests as we move
        towards x-browser pixel perfect positioning.

        Matt
      • peychevi
        ... Hi Matt, ... position ... are ... discrepancies ... layout ... future ... On bottom I will paste test1.html page in order to explain how I get to the issue
        Message 3 of 6 , Jun 25, 2008
          --- In ydn-javascript@yahoogroups.com, Matt Sweeney <msweeney@...> wrote:
          >
          > Hi Iliyan,

          Hi Matt,

          > >
          > > The problem - I tried to get XY position of the element with position
          > > 'center' in LayoutManager. Unfortunately, the results in browsers are
          > > different, despite the page mode is strict.
          > The couple pixel diffs you are seeing x-browser are due to discrepancies
          > regarding the origin of the viewport. This shouldn't affect your layout
          > though, as within each browser getXY and setXY are skewed by the same
          > 2-4 pixel diff. We are working on pixel perfect precision for a future
          > version.

          On bottom I will paste test1.html page in order to explain how I get to the issue with Dom.getXY() function.

          In short, I was going to set position to YAHOO.util.DDProxy element manually. By default, it has 2px border and its parent is document.body. In this example I created similar div.
          If you open this page with IE, Opera, FF2, Safari and FF3, you will see that the red rectangle is being positioned with some differences, about 1 or 2 pixels. In FF3 and Opera 9 it is looking perfect. In the other browsers - no.
          When I started to investigate this issue, I found that Dom.getXY returns different values and set this as bug.

          Do you know why there are differences and how to fix this issue?

          > > Also, you have to update Dom.getXY function anyway. As you know, in
          > > Firefox 3 there is already "getBoundingClientRect" function, but
          > > getXY function in Dom.js thinks it is only for Internet Explorer.
          > This is not actually true. We use feature detection to determine
          > browser capabilities whenever possible. In this case, any browser that
          > implements the getBoundingClientRect method (including Firefox 3 and
          > Opera 9.5) will fall into that branch and use getBoundingClientRect
          > method for more accurate positioning.

          Very well, I get confused by this line:

          if (document.documentElement.getBoundingClientRect) { // IE

          in function body. Note the comment "IE".

          > > I already created a bug at SourceForge.net, but I wanted to discuss
          > > ithere in order to check is there a quick way to fix this issue. The
          > > bug is here, I also prepared a test page:
          > > http://sourceforge.net/tracker/index.php?func=detail&aid=1998720&group_id=165715&atid=836476
          > > <http://sourceforge.net/tracker/index.php?func=detail&aid=1998720&group_id=165715&atid=836476>
          > >
          > Thanks for the report. We will add this case to our tests as we move
          > towards x-browser pixel perfect positioning.
          >
          > Matt
          >

          Iliyan

          -------------------------------------------------------------------------

          <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

          <html>
          <head>
          <title>Test YAHOO.util.Dom.getXY with LayoutManager</title>


          <!-- Skin CSS files resize.css must load before layout.css -->
          <link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.5.2/build/reset-fonts-grids/reset-fonts-grids.css">
          <link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.5.2/build/assets/skins/sam/resize.css">
          <link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.5.2/build/assets/skins/sam/layout.css">
          <!-- Utility Dependencies -->
          <script src="http://yui.yahooapis.com/2.5.2/build/yahoo/yahoo.js"></script>
          <script src="http://yui.yahooapis.com/2.5.2/build/dom/dom.js"></script>
          <script src="http://yui.yahooapis.com/2.5.2/build/event/event.js"></script>
          <script src="http://yui.yahooapis.com/2.5.2/build/dragdrop/dragdrop-min.js"></script>
          <script src="http://yui.yahooapis.com/2.5.2/build/element/element-beta-min.js"></script>
          <!-- Optional Animation Support-->
          <script src="http://yui.yahooapis.com/2.5.2/build/animation/animation-min.js"></script>
          <!-- Optional Resize Support -->
          <script src="http://yui.yahooapis.com/2.5.2/build/resize/resize-beta-min.js"></script>
          <!-- Source file for the Layout Manager -->
          <script src="http://yui.yahooapis.com/2.5.2/build/layout/layout-beta-min.js"></script>


          <style type="text/css">

          body {
              margin:0;
              padding:0;
          }

          .main-container{
              overflow: hidden;
              position: relative;
              width: 100%;
              height: 100%;
              border: 0px;
              padding: 0px;
          }

          #tb {
              border: 1px solid red;
              position: absolute;
          }

          </style>

          <script type="text/javascript">

          var layout;
          var dd;
          var Dom = YAHOO.util.Dom;

          function test123(){
              layout = new YAHOO.widget.Layout({
                  units: [
                      { position: 'top', height: 100, resize: false, body: 'Header', gutter: '3px 3px 5px 3px', collapse: true, close: true, collapseSize: 20, animate: true },
                      { position: 'left', header: '&nbsp;', width: 200, resize: true, body: 'left1', gutter: '0px 5px 3px 3px', collapse: true, close: false, collapseSize: 25, animate: true },
                      { position: 'center', body: 'mainContent', gutter: '0px 3px 3px 0px' }
                  ]
              });
             
              layout.render();
             
              setTbPosition();
          }

          function setTbPosition(){
              var tb = Dom.get( 'tb' );
              var mainEl = Dom.get( 'mainContent' );
              var xy = Dom.getXY( mainEl );
             
              Dom.setStyle( tb, 'right',  '' );
              Dom.setStyle( tb, 'bottom',  '' );
              Dom.setStyle( tb, 'width', '' );
              Dom.setStyle( tb, 'left', xy[0] + 'px' );
              Dom.setStyle( tb, 'top',  xy[1] + 'px' );
              Dom.setStyle( tb, 'width', '20px' );
              Dom.setStyle( tb, 'height', '250px' );
          }

          </script>

          <body class="yui-skin-sam" onload="test123();" scroll="no">

          <div id="tb">
          </div>
               
          <div id="Header">
          </div>

          <div id="left1">
          </div>

          <div id="mainContent" class="main-container">
               
          </div>

          </body>

          </html>

          -------------------------------------------------------------------------
        • Matt Sweeney
          Hi, ... In some positioning contexts, borders in FF2 are known to skew positioning values. Have you tried using Dom.setXY to set the position? Using Dom.setXY
          Message 4 of 6 , Jun 26, 2008
            Hi,

            >
            > Do you know why there are differences and how to fix this issue?

            In some positioning contexts, borders in FF2 are known to skew
            positioning values.

            Have you tried using Dom.setXY to set the position? Using Dom.setXY
            will be more accurate x-browser than feeding Dom.getXY values to
            style.top/left.


            Matt

            peychevi wrote:
            >
            > --- In ydn-javascript@yahoogroups.com, Matt Sweeney <msweeney@...> wrote:
            > >
            > > Hi Iliyan,
            >
            > Hi Matt,
            >
            > > >
            > > > The problem - I tried to get XY position of the element with position
            > > > 'center' in LayoutManager. Unfortunately, the results in browsers are
            > > > different, despite the page mode is strict.
            > > The couple pixel diffs you are seeing x-browser are due to
            > discrepancies
            > > regarding the origin of the viewport. This shouldn't affect your layout
            > > though, as within each browser getXY and setXY are skewed by the same
            > > 2-4 pixel diff. We are working on pixel perfect precision for a future
            > > version.
            >
            > On bottom I will paste test1.html page in order to explain how I get
            > to the issue with Dom.getXY() function.
            >
            > In short, I was going to set position to YAHOO.util.DDProxy
            > <http://developer.yahoo.com/yui/docs/YAHOO.util.DDProxy.html> element
            > manually. By d! efault, it has 2px border and its parent is
            > document.body. In this example I created similar div.
            > If you open this page with IE, Opera, FF2, Safari and FF3, you will
            > see that the red rectangle is being positioned with some differences,
            > about 1 or 2 pixels. In FF3 and Opera 9 it is looking perfect. In the
            > other browsers - no.
            > When I started to investigate this issue, I found that Dom.getXY
            > returns different values and set this as bug.
            >
            > Do you know why there are differences and how to fix this issue?
            >
            > > > Also, you have to update Dom.getXY function anyway. As you know, in
            > > > Firefox 3 there is already "getBoundingClientRect" function, but
            > > > getXY function in Dom.js thinks it is only for Internet Explorer.
            > > This is not actually true. We use feature detection to determine
            > > browser capabilities whenever possible. In this case, any browser that
            > > implements the getBoundingClientRe! ct method (including Firefox 3 and
            > > Opera 9.5) will fall into that branch and use getBoundingClientRect
            > > method for more accurate positioning.
            >
            > Very well, I get confused by this line:
            >
            > if (document.documentElement.getBoundingClientRect) { // IE
            >
            > in function body. Note the comment "IE".
            >
            > > > I already created a bug at SourceForge.net, but I wanted to discuss
            > > > ithere in order to check is there a quick way to fix this issue. The
            > > > bug is here, I also prepared a test page:
            > > >
            > http://sourceforge.net/tracker/index.php?func=detail&aid=1998720&group_id=165715&atid=836476
            >
            > > >
            > <http://sourceforge.net/tracker/index.php?func=detail&aid=1998720&group_id=165715&atid=836476>
            >
            > > >
            > > Thanks for the report. We will add this case to our tests as we move
            > > towards x-browser pixel perfect positioning.
            > >
            > > Matt
            > >
            >
            > Iliyan
            >
            > ------------------------------------------------!
            > -------------------------
            >
            > <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
            > "http://www.w3.org/TR/html4/strict.dtd">
            >
            > <html>
            > <head>
            > <title>Test YAHOO.util.Dom.getXY with LayoutManager</title>
            >
            >
            > <!-- Skin CSS files resize.css must load before layout.css -->
            > <link rel="stylesheet" type="text/css"
            > href="http://yui.yahooapis.com/2.5.2/build/reset-fonts-grids/reset-fonts-grids.css">
            > <link rel="stylesheet" type="text/css"
            > href="http://yui.yahooapis.com/2.5.2/build/assets/skins/sam/resize.css">
            > <link rel="stylesheet" type="text/css"
            > href="http://yui.yahooapis.com/2.5.2/build/assets/skins/sam/layout.css">
            > <!-- Utility Dependencies -->
            > <script
            > src="http://yui.yahooapis.com/2.5.2/build/yahoo/yahoo.js"></script>
            > <script src="http://yui.yahooapis.com/2.5.2/build/dom/dom.js"></script>
            > <script src="http://yui.yahooapis.com/2.5.2/build/event/event.js"&g!
            > t;</script>
            > <script src="http://yui.yahooapis.com/2.5.2/b
            > uild/dragdrop/dragdrop-min.js"></script>
            > <script
            > src="http://yui.yahooapis.com/2.5.2/build/element/element-beta-min.js"></script>
            >
            > <!-- Optional Animation Support-->
            > <script
            > src="http://yui.yahooapis.com/2.5.2/build/animation/animation-min.js"></script>
            >
            > <!-- Optional Resize Support -->
            > <script
            > src="http://yui.yahooapis.com/2.5.2/build/resize/resize-beta-min.js"></script>
            > <!-- Source file for the Layout Manager -->
            > <script
            > src="http://yui.yahooapis.com/2.5.2/build/layout/layout-beta-min.js"></script>
            >
            >
            > <style type="text/css">
            >
            > body {
            > margin:0;
            > padding:0;
            > }
            >
            > .main-container{
            > overflow: hidden;
            > position: relative;
            > width: 100%;
            > height: 100%;
            > border: 0px;
            > padding: 0px;
            > }
            >
            > #! tb {
            > border: 1px solid red;
            > position: absolute;
            > }
            >
            > </style>
            >
            > <script type="text/javascript">
            >
            > var layout;
            > var dd;
            > var Dom = YAHOO.util.Dom;
            >
            > function test123(){
            > layout = new YAHOO.widget.Layout({
            > units: [
            > { position: 'top', height: 100, resize: false, body:
            > 'Header', gutter: '3px 3px 5px 3px', collapse: true, close: true,
            > collapseSize: 20, animate: true },
            > { position: 'left', header: ' ', width: 200, resize:
            > true, body: 'left1', gutter: '0px 5px 3px 3px', collapse: true, close:
            > false, collapseSize: 25, animate: true },
            > { position: 'center', body: 'mainContent', gutter: '0px
            > 3px 3px 0px' }
            > &! nbsp; ]
            > });
            > &nb sp;
            > layout.render();
            >
            > setTbPosition();
            > }
            >
            > function setTbPosition(){
            > var tb = Dom.get( 'tb' );
            > var mainEl = Dom.get( 'mainContent' );
            > var xy = Dom.getXY( mainEl );
            >
            > Dom.setStyle( tb, 'right', '' );
            > Dom.setStyle( tb, 'bottom', '' );
            > Dom.setStyle( tb, 'width', '' );
            > Dom.setStyle( tb, 'left', xy[0] + 'px' );
            > Dom.setStyle( tb, 'top', xy[1] + 'px' );
            > Dom.setStyle( tb, 'width', '20px' );
            > Dom.setStyle( tb, 'height', '250px' );
            > }
            >
            > </script>
            >
            > <body class="yui-skin-sam" onload="test123();" scroll="no">
            >
            > <div id="tb">
            > </div>
            >
            > <div id="Header">
            > </div>
            > <div id="left1">
            > </div>
            >
            > <div id="mainContent" class="main-container">
            >
            > </div>
            >
            > </body>
            >
            > </html>
            >
            > -------------------------------------------------------------------------
            >
          • peychevi
            ... I have tried this, but in FF2 there were still some issues. FF3 hasn t been released yet and I haven t tested with IE. Now I did it again and here are the
            Message 5 of 6 , Jun 27, 2008
              --- In ydn-javascript@yahoogroups.com, Matt Sweeney <msweeney@...> wrote:
              >
              > Hi,
              >
              > >
              > > Do you know why there are differences and how to fix this issue?
              >
              > In some positioning contexts, borders in FF2 are known to skew
              > positioning values.
              >
              > Have you tried using Dom.setXY to set the position? Using Dom.setXY
              > will be more accurate x-browser than feeding Dom.getXY values to
              > style.top/left.

              I have tried this, but in FF2 there were still some issues. FF3 hasn't
              been released yet and I haven't tested with IE.

              Now I did it again and here are the results:
              This fixed the issue in Internet Explorer, in FF2 it didn't.

              So, it is working OK in all browsers, except FF2, probably due to
              these border positioning issues you mentioned above. Are there some
              workarounds for that?

              Thank you very much!

              >
              > Matt

              Iliyan
            • Matt Sweeney
              Hi Iliyan, ... The workaround is to manually account for borderTop/Left widths up the ancestor axis of the node in FF2. Matt
              Message 6 of 6 , Jun 30, 2008
                Hi Iliyan,

                > So, it is working OK in all browsers, except FF2, probably due to
                > these border positioning issues you mentioned above. Are there some
                > workarounds for that?
                The workaround is to manually account for borderTop/Left widths up the
                ancestor axis of the node in FF2.

                Matt

                peychevi wrote:
                > --- In ydn-javascript@yahoogroups.com, Matt Sweeney <msweeney@...> wrote:
                >
                >> Hi,
                >>
                >>
                >>> Do you know why there are differences and how to fix this issue?
                >>>
                >> In some positioning contexts, borders in FF2 are known to skew
                >> positioning values.
                >>
                >> Have you tried using Dom.setXY to set the position? Using Dom.setXY
                >> will be more accurate x-browser than feeding Dom.getXY values to
                >> style.top/left.
                >>
                >
                > I have tried this, but in FF2 there were still some issues. FF3 hasn't
                > been released yet and I haven't tested with IE.
                >
                > Now I did it again and here are the results:
                > This fixed the issue in Internet Explorer, in FF2 it didn't.
                >
                > So, it is working OK in all browsers, except FF2, probably due to
                > these border positioning issues you mentioned above. Are there some
                > workarounds for that?
                >
                > Thank you very much!
                >
                >
                >> Matt
                >>
                >
                > Iliyan
                >
                >
                >
              Your message has been successfully submitted and would be delivered to recipients shortly.