W3C home > Mailing lists > Public > www-style@w3.org > August 2010

[CSSOM] Interaction of getBoundingClientRect/getClientRects with transforms

From: Boris Zbarsky <bzbarsky@MIT.EDU>
Date: Tue, 31 Aug 2010 08:57:45 -0400
Message-ID: <4C7CFC49.1080506@mit.edu>
To: www-style list <www-style@w3.org>
How should getBoundingClientRect/getClientRects (which assume that the 
element they're called on decomposes into a set of axis-aligned boxes) 
interact with transforms?

For a simple testcase of a single transformed div with the functions 
called on it, Gecko reports the rect the div would have if the transform 
were not applied.  Webkit and Presto seem to report a bounding client 
rect for the transformed div (so for the case of a 100x100 px square 
rotated 45deg clockwise about the bottom-left corner they report 142px 
width and height and 29px top).  See testcase at end of mail.

The spec probably needs to say what the right behavior is here.  (And of 
course also for offset* and whatnot, but at the moment I'm more 
concerned about getClientRects.)

-Boris

<!DOCTYPE HTML>
<html>
   <head>
     <script>
       window.onload = function () {
         var n = document.getElementById("x");
         var rect = n.getBoundingClientRect();
         alert("getBoundingClientRect: " + rect.width + "x" +
                rect.height +
               " at " + "(" + rect.left + ", " + rect.top + ")");
       }
     </script>
   </head>
   <body style="margin: 0; padding: 0;">
     <div id="x"
          style="-moz-transform: rotate(45deg);
                 -moz-transform-origin: bottom left;
                 -webkit-transform: rotate(45deg);
                 -webkit-transform-origin: bottom left;
                 -o-transform: rotate(45deg);
                 -o-transform-origin: bottom left;
                 width: 100px; height: 100px; background: green"></div>
   </body>
</html>
Received on Tuesday, 31 August 2010 12:58:21 GMT

This archive was generated by hypermail 2.3.1 : Tuesday, 26 March 2013 17:20:30 GMT