diff --git a/css/app.css b/css/app.css
index 287507d91..fa3810095 100644
--- a/css/app.css
+++ b/css/app.css
@@ -2,10 +2,36 @@ body {
     font:normal 13px/20px Helvetica, Arial, sans-serif;
     background:#e4e4e4;
     margin:0;
+    padding:0;
     text-rendering: optimizeLegibility;
     color:#444;
 }
 
+#map {
+    display:block;
+    position:absolute;
+    top:0;
+    left:0;
+    right:0;
+    bottom:0;
+}
+
+#about {
+    position:absolute;
+    bottom:5px;
+    right:5px;
+    background:#fff;
+    padding:2px 5px;
+}
+
+
+#modebuttons {
+    width:600px;
+    position:absolute;
+    left:0px;
+    top:0px;
+}
+
 form {
     margin:0;
     padding:0;
@@ -16,13 +42,7 @@ form {
     outline-color: transparent;
     outline-style: none;
 }
-#about {
-    position:absolute;
-    bottom:5px;
-    right:5px;
-    background:#fff;
-    padding:2px 5px;
-}
+
 p {
     margin:0;
     padding:0;
@@ -72,12 +92,6 @@ table td {
     font-style:italic;
 }
 
-#modebuttons {
-    width:600px;
-    position:absolute;
-    left:0px;
-    top:0px;
-}
 
 #zoombuttons {
     position:absolute;
diff --git a/index.html b/index.html
index 7ccffdd23..27a06bf2c 100755
--- a/index.html
+++ b/index.html
@@ -6,6 +6,7 @@
         <link rel="stylesheet" href="css/reset.css">
         <link rel="stylesheet" href="css/map.css">
         <link rel="stylesheet" href="css/app.css">
+        <meta name="viewport" content="initial-scale=1.0 maximum-scale=1.0">
     </head>
     <body>
         <script type="text/javascript" src="js/lib/underscore-min.js"></script>
@@ -34,6 +35,7 @@
         <script type="text/javascript" src="js/iD/Controller.js"></script>
         <script type="text/javascript" src="js/iD/controller/DrawWay.js"></script>
 
+        <div id="map"></div>
         <div id='modebuttons'>
             <button id='add-place'>
                 + Place</button><button id="add-road">
@@ -48,7 +50,6 @@
             <button id="zoomIn">+</button><button id="zoomOut">&ndash;</button>
         </div>
 
-    <div id="map"></div>
     <div class='inspector-wrap'></div>
     <div id='about'>
         <p>Work in progress: <a href='http://www.geowiki.com/'>introduction</a>,
@@ -59,12 +60,13 @@
 <script>
     var connection = new iD.Connection("http://www.overpass-api.de/api/xapi?");
 
+    var m = d3.select('#map');
     // Initialise map
     var map = iD.Map({
         selector: "#map",
         connection: connection,
-        width: window.innerWidth,
-        height: window.innerHeight
+        width: m.node().offsetWidth,
+        height: m.node().offsetHeight
     });
     map.setZoom(18)
         .setCentre({ lat: 40.7965621, lon: -74.4773184 });
diff --git a/js/iD/renderer/Map.js b/js/iD/renderer/Map.js
index 13085494e..8ce67eb99 100755
--- a/js/iD/renderer/Map.js
+++ b/js/iD/renderer/Map.js
@@ -159,8 +159,8 @@ iD.Map = function(obj) {
     function deselectClick() {
         selection = [];
         drawVector();
-        d3.event.stopPropagation();
         d3.select('.inspector-wrap').style('display', 'none');
+        d3.event.stopPropagation();
     }
 
     function selectClick(d) {
@@ -360,9 +360,12 @@ iD.Map = function(obj) {
         tiles.enter().append('image')
             .attr('class', 'tile')
             .attr('xlink:href', tileUrl);
-        tiles.attr({ width: ts, height: ts })
+        tiles.attr({ width: Math.ceil(ts), height: Math.ceil(ts) })
             .attr('transform', function(d) {
-                return 'translate(' + [(d[1] * ts) - tile_origin[0], (d[2] * ts) - tile_origin[1]] + ')';
+                return 'translate(' + [
+                    Math.round((d[1] * ts) - tile_origin[0]),
+                    Math.round((d[2] * ts) - tile_origin[1])
+                ] + ')';
             });
         drawVector();
         download();
