4 files changed, 34 insertions, 26 deletions

diff --git a/js/controllers/elements/element-controller.js b/js/controllers/elements/element-controller.js
index 7ab6664f..2ac84452 100755
--- a/js/controllers/elements/element-controller.js
+++ b/js/controllers/elements/element-controller.js
@@ -264,6 +264,10 @@ exports.ElementController = Montage.create(Component, {
                                                                     "-webkit-transform",
                                                                     "matrix3d(" + MathUtils.scientificToDecimal(mat, 5) + ")");
 
+            this.application.ninja.stylesController.setElementStyle(el,
+                                                                    "-webkit-transform-style",
+                                                                    "preserve-3d");
+
             // TODO - We don't support perspective on individual elements yet
 //            this.application.ninja.stylesController.setElementStyle(el,
 //                                                                    "-webkit-perspective",
diff --git a/js/data/pi/pi-data.js b/js/data/pi/pi-data.js
index 07017f09..157c54ec 100755
--- a/js/data/pi/pi-data.js
+++ b/js/data/pi/pi-data.js
@@ -131,6 +131,8 @@ exports.PiData = Montage.create( Montage, {
                             type : "hottext",
                             id : "borderWidth",
                             prop : "border-width",
+                            defaultValue: 0,
+                            valueMutator: parseFloat,
                             label : "Border",
                             min :   0,
                             max :   100,
diff --git a/js/helper-classes/3D/snap-manager.js b/js/helper-classes/3D/snap-manager.js
index 61f5bc97..02e81a62 100755
--- a/js/helper-classes/3D/snap-manager.js
+++ b/js/helper-classes/3D/snap-manager.js
@@ -1354,7 +1354,7 @@ var SnapManager = exports.SnapManager = Montage.create(Component, {
                                                         var offset = viewUtils.getElementOffset( elt );
                                                         MathUtils.makeDimension3( offset );
                                                         var parentPt = vecUtils.vecAdd(3, scrPt, offset );
-                                                        var globalPt = viewUtils.localToGlobal( parentPt, elt.parentElement );
+                                                        var globalPt = viewUtils.localToGlobal( parentPt, elt.offsetParent );
 
                                                         var dist = vecUtils.vecDist(2, globalPt, targetScrPt );
                                                         if (dist < this.ELEMENT_VERTEX_HIT_RAD)
@@ -1392,7 +1392,7 @@ var SnapManager = exports.SnapManager = Montage.create(Component, {
                                                                 var offset = viewUtils.getElementOffset( elt );
                                                                 MathUtils.makeDimension3( offset );
                                                                 var parentPt = vecUtils.vecAdd(3, scrPt, offset );
-                                                                var globalPt = viewUtils.localToGlobal( parentPt, elt.parentElement );
+                                                                var globalPt = viewUtils.localToGlobal( parentPt, elt.offsetParent );
 
                                                                 var dist = vecUtils.vecDist(2, globalPt, targetScrPt );
                                                                 if (dist < this.ELEMENT_EDGE_HIT_RAD)
@@ -1445,7 +1445,7 @@ var SnapManager = exports.SnapManager = Montage.create(Component, {
                                                         var offset = viewUtils.getElementOffset( elt );
                                                         MathUtils.makeDimension3( offset );
                                                         var parentPt = vecUtils.vecAdd(3, scrPt, offset );
-                                                        var globalPt = viewUtils.localToGlobal( parentPt, elt.parentElement );
+                                                        var globalPt = viewUtils.localToGlobal( parentPt, elt.offsetParent );
 
                                                         var dist = vecUtils.vecDist(2, globalPt, targetScrPt );
                                                         if (dist < this.ELEMENT_VERTEX_HIT_RAD)
@@ -1483,7 +1483,7 @@ var SnapManager = exports.SnapManager = Montage.create(Component, {
                                                                 var offset = viewUtils.getElementOffset( elt );
                                                                 MathUtils.makeDimension3( offset );
                                                                 var parentPt = vecUtils.vecAdd(3, scrPt, offset );
-                                                                var globalPt = viewUtils.localToGlobal( parentPt, elt.parentElement );
+                                                                var globalPt = viewUtils.localToGlobal( parentPt, elt.offsetParent );
 
                                                                 var dist = vecUtils.vecDist(2, globalPt, targetScrPt );
                                                                 if (dist < this.ELEMENT_EDGE_HIT_RAD)
diff --git a/js/helper-classes/3D/view-utils.js b/js/helper-classes/3D/view-utils.js
index 55ecbc59..1cd1c313 100755
--- a/js/helper-classes/3D/view-utils.js
+++ b/js/helper-classes/3D/view-utils.js
@@ -259,7 +259,7 @@ exports.ViewUtils = Montage.create(Component, {
 
             // transform the point up the tree
             var child = elt;
-            var parent = elt.parentElement;
+            var parent = elt.offsetParent;
             while ( parent )
             {
                 // go to screen space of the current child
@@ -287,7 +287,7 @@ exports.ViewUtils = Montage.create(Component, {
                 }
 
                 child = parent;
-                parent = parent.parentElement;
+                parent = parent.offsetParent;
             }
 
             return pt;
@@ -303,7 +303,7 @@ exports.ViewUtils = Montage.create(Component, {
 
             // transform the bounds up the tree
             var child = elt;
-            var parent = elt.parentElement;
+            var parent = elt.offsetParent;
             while ( parent )
             {
                 pt = this.childToParent( pt, child );
@@ -311,7 +311,7 @@ exports.ViewUtils = Montage.create(Component, {
                 if (parent === this._rootElement)  break;
 
                 child = parent;
-                parent = parent.parentElement;
+                parent = parent.offsetParent;
             }
 
             /////////////////////////////////////////////////////////
@@ -346,7 +346,7 @@ exports.ViewUtils = Montage.create(Component, {
             if (pt.length == 2)  pt[2] = 0;
 
             // transform the bounds up the tree
-            var parent = child.parentElement;
+            var parent = child.offsetParent;
             if ( parent )
             {
                 this.setViewportObj( child );
@@ -394,7 +394,7 @@ exports.ViewUtils = Montage.create(Component, {
             pt[3] = 1;
 
             // transform the bounds up the tree
-            var parent = child.parentElement;
+            var parent = child.offsetParent;
             if ( parent )
             {
                 this.setViewportObj( child );
@@ -429,7 +429,7 @@ exports.ViewUtils = Montage.create(Component, {
 
             /*
              this.pushViewportObj( elt );
-             var parent = elt.parentElement;
+             var parent = elt.offsetParent;
              var offset = this.getElementOffset( elt );
              offset[2] = 0;
              var localEyePt = this.getCenterOfProjection();
@@ -603,19 +603,6 @@ exports.ViewUtils = Montage.create(Component, {
                 w       = elt.offsetWidth,
                 h       = elt.offsetHeight;
 
-            if(elt.width)
-                w = elt.width;
-            if(elt.height)
-                h = elt.height;
-
-            if (elt.style)
-            {
-                if (elt.style.left)     left    = MathUtils.styleToNumber(elt.style.left);
-                if (elt.style.top)      top     = MathUtils.styleToNumber(elt.style.top);
-                if (elt.style.width)    w   = MathUtils.styleToNumber(elt.style.width);
-                if (elt.style.height)   h  = MathUtils.styleToNumber(elt.style.height);
-            }
-
 //            if (elt instanceof SVGSVGElement) {
             if(elt.nodeName.toLowerCase() === "svg") {
                         if(w instanceof SVGAnimatedLength)
@@ -658,6 +645,21 @@ exports.ViewUtils = Montage.create(Component, {
         //        if (elt.__ninjaXOff)  xOff = elt.__ninjaXOff;
         //        if (elt.__ninjaYOff)  yOff = elt.__ninjaYOff;
             var offset = [xOff, yOff];
+            if(elt.offsetParent && (elt.offsetParent !== this._stageElement))
+            {
+                var pS = elt.ownerDocument.defaultView.getComputedStyle(elt.offsetParent);
+
+                var border = parseInt(pS.getPropertyValue("border"));
+
+                if(border)
+                {
+                    var bl = parseInt(pS.getPropertyValue("border-left-width")),
+                        bt = parseInt(pS.getPropertyValue("border-top-width"));
+
+                    offset[0] += bl;
+                    offset[1] += bt;
+                }
+            }
 
             if(elt === this._stageElement)
             {
@@ -987,7 +989,7 @@ exports.ViewUtils = Montage.create(Component, {
 
                 if (elt === this._stageElement)  break;