Transform supersurface on pan/zoom

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

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;
     }