From 62e53fc98b6fea80680198ea4c269f2ec9750f58 Mon Sep 17 00:00:00 2001
From: John Firebaugh <john.firebaugh@gmail.com>
Date: Tue, 5 Mar 2013 16:37:04 -0800
Subject: [PATCH] Transform supersurface on pan/zoom

---
 css/app.css           | 11 +++--------
 js/id/renderer/map.js | 18 ++++++++----------
 2 files changed, 11 insertions(+), 18 deletions(-)

diff --git a/css/app.css b/css/app.css
index 02b0431f8..7e561dcac 100644
--- a/css/app.css
+++ b/css/app.css
@@ -1823,12 +1823,7 @@ img.wiki-image {
     background:#000;
 }
 
-#surface, #layer-g, .layer-layer {
-    position:absolute;
-    top:0;
-    left: 0;
-    right: 0;
-    bottom: 0;
+#supersurface {
     transform-origin:0 0;
     -ms-transform-origin:0 0;
     -webkit-transform-origin:0 0;
@@ -1840,8 +1835,8 @@ img.wiki-image {
     user-select: none;
 }
 
-#surface {
-  position: static;
+#surface, #layer-g, .layer-layer {
+    position: absolute;
 }
 
 /* About Section
diff --git a/js/id/renderer/map.js b/js/id/renderer/map.js
index 4054da41d..1c2a21412 100644
--- a/js/id/renderer/map.js
+++ b/js/id/renderer/map.js
@@ -24,7 +24,7 @@ iD.Map = function(context) {
         midpoints = iD.svg.Midpoints(roundedProjection, context),
         labels = iD.svg.Labels(roundedProjection, context),
         tail = iD.ui.Tail(),
-        surface, layergroup;
+        supersurface, surface, layergroup;
 
     function map(selection) {
         context.history()
@@ -36,11 +36,11 @@ iD.Map = function(context) {
 
         selection.call(zoom);
 
-        layergroup = selection.append('div')
-            .attr('id', 'layer-g');
+        supersurface = selection.append('div')
+            .attr('id', 'supersurface');
 
-        var supersurface = selection.append('div')
-            .style('position', 'absolute');
+        layergroup = supersurface.append('div')
+            .attr('id', 'layer-g');
 
         surface = supersurface.append('svg')
             .on('mousedown.zoom', function() {
@@ -166,22 +166,20 @@ iD.Map = function(context) {
             'scale(' + scale + ')' +
             'translate(' + tX + 'px,' + tY + 'px) ';
 
-        layergroup.style(transformProp, transform);
-        surface.style(transformProp, transform);
+        supersurface.style(transformProp, transform);
         queueRedraw();
 
         dispatch.move(map);
     }
 
     function isTransformed() {
-        var prop = surface.node().style[transformProp];
+        var prop = supersurface.style(transformProp);
         return prop && prop !== 'none';
     }
 
     function resetTransform() {
         if (!isTransformed()) return false;
-        surface.node().style[transformProp] = '';
-        layergroup.node().style[transformProp] = '';
+        supersurface.style(transformProp, '');
         return true;
     }