Switch from CSS positioning for major state transitions to transform.

app/base.css

@@ -274,7 +274,8 @@ nav > a {
   bottom:0%;
   height:100%;
   box-shadow:rgba(0,0,0,0.1) -2px 0px 0px;
-  -webkit-transition:left 200ms, width 200ms;
+  -webkit-transform:translateX(0);
+  -webkit-transition:-webkit-transform 200ms, width 200ms;
   }
 
 .grid { padding:5px; }
@@ -294,6 +295,10 @@ nav > a {
 .w13 { width:33.3333%; }
 .w23 { width:66.6667%; }
 .w33 { width:100%; }
+.ln4 { left:-100%; }
+.ln3 { left:-75%; }
+.ln2 { left:-50%; }
+.ln1 { left:-25%; }
 .l0 { left:0%; }
 .l1 { left:25%; }
 .l2 { left:50%; }
@@ -306,19 +311,19 @@ nav > a {
 .pane {
   position:absolute;
   z-index:1002;
-  bottom:100%;
   height:100%;
   background:#ddd;
   background-image:-webkit-linear-gradient(#ddd 75%,#bbb);
   overflow:auto;
   box-shadow:rgba(0,0,0,0.1) -2px 0px 0px;
-  -webkit-transition:bottom 200ms;
+  -webkit-transform:translateY(-100%);
+  -webkit-transition:-webkit-transform 200ms;
   }
 .pane > * { display:none; }
 .overlay:target .pane > *,
 .pane:target > * { display:block; }
 .overlay:target .pane,
-.pane:target { bottom:0%; }
+.pane:target { -webkit-transform:translateY(0%); }
 .pane nav {
   position:absolute;
   right:10px;
@@ -645,10 +650,6 @@ nav > a {
 #layers .sourcetype.remote * { background-color:#48a; }
 #layers .sourcetype.local * { background-color:#c84; }
 
-#data:target ~ #layers { display:block; }
-#data:target ~ #layers a.delete { display:block; }
-#data:target ~ #layers .sourcetype { display:none; }
-
 #layers a {
   color:#aaa;
   white-space:nowrap;
@@ -732,28 +733,40 @@ nav > a {
 
 /* Modal popup */
 .modal {
-  display:none;
-  position:absolute; left:50%; top:20%; z-index:2001;
+  position:absolute; left:50%; top:20%; z-index:-1;
   padding:20px;
   border-radius:4px;
   width:320px;
   margin:0px 0px 0px -160px;
   background:#ddd;
   box-shadow:rgba(0,0,0,0.1) 0px 0px 0px 3px;
+  -webkit-transform:scale(0,0);
+  -webkit-transition:-webkit-transform 100ms, z-index 100ms;
   }
 .modal .close {
   position:absolute; top:-15px; right:-15px;
   border-radius:50%;
   }
 #mask {
-  display:none;
-  position:absolute; z-index:2000;
+  opacity:0;
+  z-index:-1;
+  position:absolute;
   width:100%; height:100%;
   background:rgba(224,224,224,0.8);
+  -webkit-transition:opacity 100ms, z-index 100ms;
   }
+.modal > * { display:none; }
 .modal.target,
-.modal:target,
-.modal:target ~ #mask { display:block; }
+.modal:target {
+  z-index:2001;
+  -webkit-transform:scale(1,1);
+  }
+.modal.target > *,
+.modal:target > * { display:block; }
+.modal:target ~ #mask {
+  z-index:2000;
+  opacity:1;
+  }
 
 .dark .modal { background:#444; }
 .dark #mask { background:rgba(0,0,0,0.8); }

app/style.css

@@ -5,14 +5,13 @@
   position:absolute;
   top:40px;
   bottom:0px;
-  left:-50%;
+  /*left:-50%;*/
   width:200%;
-  transition:left 200ms;
-  -moz-transition:left 200ms;
-  -webkit-transition:left 200ms;
+  -webkit-transform:translateX(-25%);
+  -webkit-transition:-webkit-transform 200ms;
   }
 #full:target #map {
-  left:0% !important;
+  -webkit-transform:translateX(0%) !important;
   width:100% !important;
   }
 .leaflet-left {
@@ -201,14 +200,19 @@ div.source a.section { cursor:pointer; }
 
 /* Visibility */
 /* Off-canvas menu vs. Content */
-#data:target ~ .l0,
-.menu:target ~ .l0 { left:25%; }
-#data:target ~ .l2,
-.menu:target ~ .l2 { left:75%; }
+#data:target ~ .l0.w2,
+.menu:target ~ .l0.w2 { -webkit-transform:translateX(50%); }
+#data:target ~ .l2.w2,
+.menu:target ~ .l2.w2 { -webkit-transform:translateX(50%); }
 #full:target { width:100%; }
-#full:target ~ .l2 { left:100%; }
+#full:target ~ .l2 { -webkit-transform:translateX(100%); }
 #full:target .leaflet-left { left:0%; }
 
+#layers:target,
+#data:target ~ #layers { -webkit-transform:translateX(100%); }
+#data:target ~ #layers a.delete { display:block; }
+#data:target ~ #layers .sourcetype { display:none; }
+
 #perf:target ~ #full { bottom:40px; }
 
 /* Button visibility/clickability */

templates/source._

@@ -132,7 +132,9 @@ revlayers.reverse();
       <option value='csv'>csv</option>
     </select>
   </p>
-  <input type='submit' value='New layer'/>
+  <div>
+    <input type='submit' value='New layer'/>
+  </div>
 </form>
 <% } %>
 

templates/style._

@@ -99,7 +99,7 @@
 </div>
 </form>
 
-<div id='layers' class='menu column w1 dark hide'>
+<div id='layers' class='menu column w1 dark ln1'>
   <nav class='menu-title centered'>
     <a href='#' class='button icon close left'></a>
     <a href='#data' class='button title data-n icon plus'>Data</a>