fix(error): safari css fixes

Author: adamdbradley

bin/ion-dev.css

@@ -64,13 +64,15 @@ window.IonicDevServer = {
       c.push(' </div>');
       c.push('</div>');
 
-      c.push('<div class="ion-diagnostic">');
-      c.push(' <div class="ion-diagnostic-masthead">');
-      c.push('  <div class="ion-diagnostic-header">Runtime Error</div>');
-      c.push('  <div class="ion-diagnostic-message">' + err.message + '</div>');
+      c.push('<div class="ion-diagnostics-content">');
+      c.push(' <div class="ion-diagnostic">');
+      c.push('  <div class="ion-diagnostic-masthead">');
+      c.push('   <div class="ion-diagnostic-header">Runtime Error</div>');
+      c.push('   <div class="ion-diagnostic-message">' + err.message + '</div>');
+      c.push('  </div>');
+      c.push('  <div class="ion-diagnostic-stack-header">Stack</div>');
+      c.push('  <div class="ion-diagnostic-stack">' + err.stack + '</div>');
       c.push(' </div>');
-      c.push(' <div class="ion-diagnostic-stack-header">Stack</div>');
-      c.push(' <div class="ion-diagnostic-stack">' + err.stack + '</div>');
       c.push('</div>');
 
       this.buildUpdate({
@@ -264,7 +266,7 @@ window.IonicDevServer = {
           systemInfoEle = document.createElement('div');
           systemInfoEle.id = 'ion-diagnostics-system-info';
           systemInfoEle.innerHTML = IonicDevServerConfig.systemInfo.join('\n');
-          diagnosticsEle.appendChild(systemInfoEle);
+          diagnosticsEle.querySelector('.ion-diagnostics-content').appendChild(systemInfoEle);
         }
       }
     }

bin/ion-dev.js

@@ -29,10 +29,16 @@
   background-color: $background-color;
 
   box-sizing: border-box;
-  overflow: auto;
+  overflow: hidden;
   user-select: auto;
 }
 
+.ion-diagnostics-content {
+  overflow-x: hidden;
+  overflow-y: scroll;
+  -webkit-overflow-scrolling: touch;
+}
+
 #ion-diagnostics .ion-diagnostic {
   margin: 20px;
   border: 1px solid $diagnostics-border;

src/dev-client/sass/_diagnostics.scss

@@ -10,28 +10,40 @@
 }
 
 .ion-diagnostics-header-content {
+  display: -webkit-flex;
   display: flex;
+
   overflow: hidden;
 
+  -webkit-flex-direction: row;
   flex-direction: row;
+
+  -webkit-align-items: center;
   align-items: center;
+
+  -webkit-justify-content: space-between;
   justify-content: space-between;
 
   width: 100%;
   min-height: 44px;
 }
 
 .ion-diagnostics-header-inner {
+  -webkit-flex: 1;
   flex: 1;
+
+  display: -webkit-flex;
   display: flex;
+
   padding: 0 20px;
   font-size: 20px;
 }
 
 .ion-diagnostics-buttons {
-  flex: 0;
-  padding: 0 0 0 20px;
+  display: -webkit-flex;
   display: flex;
+
+  padding: 0 0 0 20px;
 }
 
 #ion-diagnostic-close {

src/dev-client/sass/_header.scss

@@ -190,6 +190,8 @@ export function getDiagnosticsHtmlContent(buildDir: string, includeDiagnosticsHt
     </div>
   `);
 
+  c.push(`<div class="ion-diagnostics-content">`);
+
   if (includeDiagnosticsHtml) {
     c.push(includeDiagnosticsHtml);
   }
@@ -203,6 +205,8 @@ export function getDiagnosticsHtmlContent(buildDir: string, includeDiagnosticsHt
     }
   }
 
+  c.push(`</div>`);
+
   return c.join('\n');
 }