Failsafe browser detection system

css/app.css

@@ -12,6 +12,13 @@ body {
     -webkit-font-smoothing: subpixel-antialiased;
 }
 
+.unsupported {
+    text-align: center;
+    vertical-align: middle;
+    padding-top: 100px;
+    font-size: 16px;
+}
+
 #iD {
     height: 100%;
     width: 100%;

index.html

@@ -191,12 +191,15 @@
         <div id='iD'></div>
         <script>
             var div = document.getElementById('iD');
-            if (!iD.detect().support) return iD.
-            iD.data.load(function() {
-                id = iD();
-                d3.select(div)
-                    .call(id.ui());
-            })
+            if (!iD.detect().support) {
+                iD.unsupported(div);
+            } else {
+                iD.data.load(function() {
+                    id = iD();
+                    d3.select(div)
+                        .call(id.ui());
+                })
+            }
         </script>
     </body>
 </html>

index_packaged.html

@@ -40,9 +40,14 @@
             a.src=document.location.protocol+"//dnn506yrbagrg.cloudfront.net/pages/scripts/0013/6714.js?"+Math.floor(new Date().getTime()/3600000);
             a.async=true;a.type="text/javascript";b.parentNode.insertBefore(a,b)}, 1);
 
-            var id = iD();
-            d3.select('#iD')
-                .call(id.ui());
+            var div = document.getElementById('iD');
+            if (!iD.detect().support) {
+                iD.unsupported(div);
+            } else {
+                var id = iD();
+                d3.select(div)
+                    .call(id.ui());
+            }
         </script>
     </body>
 </html>

js/id/id.js

@@ -165,6 +165,8 @@ iD.detect = function() {
         browser.support = true;
     }
 
+    browser.support = false;
+
     // Added due to incomplete svg style support. See #715
     browser.opera = ua.indexOf('Opera') >= 0;
 
@@ -184,3 +186,13 @@ iD.detect = function() {
 
     return browser;
 };
+
+iD.unsupported = function(div) {
+    try {
+        div.innerHTML = t('browser_notice');
+    } catch(e) {
+        div.innerHTML = 'This editor is supported in Firefox, Chrome, Safari, Opera, and Internet Explorer 9 and above. ' +
+            'Please upgrade your browser or use Potlatch 2 to edit the map.';
+    }
+    div.className = 'unsupported';
+};

js/id/ui.js

@@ -5,16 +5,6 @@ iD.ui = function(context) {
         var history = context.history(),
             map = context.map();
 
-        if (!iD.detect().support) {
-            container
-                .text(t('browser_notice'))
-                .style({
-                    'text-align': 'center',
-                    'font-style': 'italic'
-                });
-            return;
-        }
-
         if (iD.detect().opera) container.classed('opera', true);
 
         var hash = iD.behavior.Hash(context);