diff --git a/app/styles/_core.less b/app/styles/_core.less
index b14d3ce10a..059567ecf9 100644
--- a/app/styles/_core.less
+++ b/app/styles/_core.less
@@ -7,38 +7,46 @@
   display: none !important;
 }
 
-// Prevent zooming when focusing input fields in mobile Safari. Try to only
-// target mobile devices to avoid larger-than-wanted fonts elsewhere.
-@media only screen and (max-device-width: 736px) and (-webkit-min-device-pixel-ratio: 0) {
-  input[type="text"],
-  input[type="number"],
-  input[type="search"],
-  input[type="url"],
-  select,
-  select.form-control,
-  textarea,
-  textarea.form-control,
-  .console-os .ace_editor {
-    font-size: 16px;
-  }
-
-  // Fix Bootstrap modal dialog zoom on the iPhone
-  // See http://stackoverflow.com/questions/32675849/screen-zooms-in-when-a-bootstrap-modal-is-opened-on-ios-9-safari
-  body {
-    padding-right: 0px !important
-  }
-  .modal-open {
-    overflow-y: auto;
-  }
-}
-
-// Prevent having to tap tabs twice on iOS.
-.ios .nav-tabs > {
-  li > a:hover:before {
-    content: none;
-  }
-  li.active > a:before {
-    content: '';
+@media only screen and (max-device-width: 736px) {
+  body.ios {
+    // Fix Bootstrap modal dialog zoom on the iPhone
+    // See http://stackoverflow.com/questions/32675849/screen-zooms-in-when-a-bootstrap-modal-is-opened-on-ios-9-safari
+    padding-right: 0px !important;
+
+    // Prevent page from scrolling underneath modals and wizard overlays.
+    &.modal-open, &.overlay-open {
+      overflow-y: auto;
+      position: fixed;
+    }
+
+    // Prevent zooming when focusing input fields in mobile Safari. Only
+    // target iPhones to avoid larger-than-wanted fonts elsewhere.
+    input[type="text"],
+    input[type="number"],
+    input[type="search"],
+    input[type="url"],
+    select,
+    select.form-control,
+    textarea,
+    textarea.form-control,
+    .console-os .ace_editor {
+      font-size: 16px;
+    }
+
+    // Make sure buttons are visible always on iPhone X.
+    .catalogs-overlay-panel .wizard-pf-main {
+      max-height: calc(100vh ~"-" 275px);
+    }
+
+    // Prevent having to tap tabs twice on iOS.
+    .nav-tabs > {
+      li > a:hover:before {
+        content: none;
+      }
+      li.active > a:before {
+        content: '';
+      }
+    }
   }
 }
 
diff --git a/app/styles/_scrollbars.less b/app/styles/_scrollbars.less
index 905a9cd28f..6c0412d381 100644
--- a/app/styles/_scrollbars.less
+++ b/app/styles/_scrollbars.less
@@ -2,59 +2,61 @@
 // Scrollbars for main flex containers
 // ------------------------------------------------------
 
-::-webkit-scrollbar {
-  height: 10px;
-  overflow: visible;
-  width: @scrollbar-width;
-}
-
-::-webkit-scrollbar-corner {
-  background: transparent;
-}
-
-::-webkit-scrollbar-thumb {
-  background-clip: padding-box;
-  background-color: @scrollbar-thumb;
-  border: solid transparent;
-  border-width: 1px 1px 1px 1px;
-  box-shadow: inset 1px 1px 0 rgba(0,0,0,.1),inset 0 -1px 0 rgba(0,0,0,.07);
-  max-height: 60px;
-  min-height: 28px;
-  padding: 100px 0 0;
-  &:active,
-  &:hover {
-    background-color: @scrollbar-thumb-hover;
+:not(.ios) {
+  ::-webkit-scrollbar {
+    height: 10px;
+    overflow: visible;
+    width: @scrollbar-width;
   }
-}
 
-::-webkit-scrollbar-track {
-  background-clip:padding-box;
-  background-color: @scrollbar-track;
-}
+  ::-webkit-scrollbar-corner {
+    background: transparent;
+  }
 
-.chromeless .middle,
-.landing,
-.landing-side-bar,
-.log-view .log-view-output,
-.project-bar .dropdown-menu {
-  &::-webkit-scrollbar-thumb {
-    background-color: @scrollbar-thumb-inverse;
-    box-shadow: inset 1px 1px 0 rgba(255,255,255,.1),inset 0 -1px 0 rgba(255,255,255,.07);
+  ::-webkit-scrollbar-thumb {
+    background-clip: padding-box;
+    background-color: @scrollbar-thumb;
+    border: solid transparent;
+    border-width: 1px 1px 1px 1px;
+    box-shadow: inset 1px 1px 0 rgba(0,0,0,.1),inset 0 -1px 0 rgba(0,0,0,.07);
+    max-height: 60px;
+    min-height: 28px;
+    padding: 100px 0 0;
     &:active,
     &:hover {
-      background-color: @scrollbar-thumb-hover-inverse;
+      background-color: @scrollbar-thumb-hover;
     }
   }
-}
 
-.landing::-webkit-scrollbar-track {
-  background-color: @scrollbar-track-landing;
-}
+  ::-webkit-scrollbar-track {
+    background-clip:padding-box;
+    background-color: @scrollbar-track;
+  }
 
-.landing-side-bar::-webkit-scrollbar-track {
-  background-color: @scrollbar-track-landing-side-bar;
-}
+  .chromeless .middle,
+  .landing,
+  .landing-side-bar,
+  .log-view .log-view-output,
+  .project-bar .dropdown-menu {
+    &::-webkit-scrollbar-thumb {
+      background-color: @scrollbar-thumb-inverse;
+      box-shadow: inset 1px 1px 0 rgba(255,255,255,.1),inset 0 -1px 0 rgba(255,255,255,.07);
+      &:active,
+      &:hover {
+        background-color: @scrollbar-thumb-hover-inverse;
+      }
+    }
+  }
 
-.project-bar ::-webkit-scrollbar-track {
-  background-color: @scrollbar-track-inverse;
+  .landing::-webkit-scrollbar-track {
+    background-color: @scrollbar-track-landing;
+  }
+
+  .landing-side-bar::-webkit-scrollbar-track {
+    background-color: @scrollbar-track-landing-side-bar;
+  }
+
+  .project-bar ::-webkit-scrollbar-track {
+    background-color: @scrollbar-track-inverse;
+  }
 }
diff --git a/dist/styles/main.css b/dist/styles/main.css
index 585ca83d4a..8eacfc77f1 100644
--- a/dist/styles/main.css
+++ b/dist/styles/main.css
@@ -4565,12 +4565,13 @@ code.command{display:inline-block;line-height:1.3;margin-right:2px}
 .service-binding-actions>a:first-of-type{border-left:0;padding-left:0;padding-right:5px}
 .service-description .truncated-content{white-space:pre-wrap}
 .ng-cloak,.x-ng-cloak,[data-ng-cloak],[ng-cloak],[ng\:cloak],[x-ng-cloak]{display:none!important}
-@media only screen and (max-device-width:736px) and (-webkit-min-device-pixel-ratio:0){.console-os .ace_editor,input[type=text],input[type=url],input[type=number],input[type=search],select,select.form-control,textarea,textarea.form-control{font-size:16px}
-body{padding-right:0px!important}
-.modal-open{overflow-y:auto}
+@media only screen and (max-device-width:736px){body.ios{padding-right:0px!important}
+body.ios.modal-open,body.ios.overlay-open{overflow-y:auto;position:fixed}
+body.ios .console-os .ace_editor,body.ios input[type=text],body.ios input[type=url],body.ios input[type=number],body.ios input[type=search],body.ios select,body.ios select.form-control,body.ios textarea,body.ios textarea.form-control{font-size:16px}
+body.ios .catalogs-overlay-panel .wizard-pf-main{max-height:calc(100vh - 275px)}
+body.ios .nav-tabs li>a:hover:before{content:none}
+body.ios .nav-tabs li.active>a:before{content:''}
 }
-.ios .nav-tabs li>a:hover:before{content:none}
-.ios .nav-tabs li.active>a:before{content:''}
 @-moz-document url-prefix(){.console-os fieldset{display:table-cell}
 }
 .separator{border-top:1px solid rgba(0,0,0,.15)}
@@ -5403,16 +5404,16 @@ td.visible-print,th.visible-print{display:table-cell!important}
 @media print{.visible-print-inline-block{display:inline-block!important}
 .hidden-print{display:none!important}
 }
-::-webkit-scrollbar{height:10px;overflow:visible;width:15px}
-::-webkit-scrollbar-corner{background:0 0}
-::-webkit-scrollbar-thumb{background-clip:padding-box;background-color:rgba(0,0,0,.08);border:solid transparent;border-width:1px;box-shadow:inset 1px 1px 0 rgba(0,0,0,.1),inset 0 -1px 0 rgba(0,0,0,.07);max-height:60px;min-height:28px;padding:100px 0 0}
-::-webkit-scrollbar-thumb:active,::-webkit-scrollbar-thumb:hover{background-color:rgba(0,0,0,.18)}
-::-webkit-scrollbar-track{background-clip:padding-box;background-color:rgba(0,0,0,.03)}
-.chromeless .middle::-webkit-scrollbar-thumb,.landing-side-bar::-webkit-scrollbar-thumb,.landing::-webkit-scrollbar-thumb,.log-view .log-view-output::-webkit-scrollbar-thumb,.project-bar .dropdown-menu::-webkit-scrollbar-thumb{background-color:rgba(255,255,255,.25);box-shadow:inset 1px 1px 0 rgba(255,255,255,.1),inset 0 -1px 0 rgba(255,255,255,.07)}
-.chromeless .middle::-webkit-scrollbar-thumb:active,.chromeless .middle::-webkit-scrollbar-thumb:hover,.landing-side-bar::-webkit-scrollbar-thumb:active,.landing-side-bar::-webkit-scrollbar-thumb:hover,.landing::-webkit-scrollbar-thumb:active,.landing::-webkit-scrollbar-thumb:hover,.log-view .log-view-output::-webkit-scrollbar-thumb:active,.log-view .log-view-output::-webkit-scrollbar-thumb:hover,.project-bar .dropdown-menu::-webkit-scrollbar-thumb:active,.project-bar .dropdown-menu::-webkit-scrollbar-thumb:hover{background-color:rgba(255,255,255,.35)}
-.landing::-webkit-scrollbar-track{background-color:#042e43}
-.landing-side-bar::-webkit-scrollbar-track{background-color:#21272e}
-.project-bar ::-webkit-scrollbar-track{background-color:#050505}
+:not(.ios) ::-webkit-scrollbar{height:10px;overflow:visible;width:15px}
+:not(.ios) ::-webkit-scrollbar-corner{background:0 0}
+:not(.ios) ::-webkit-scrollbar-thumb{background-clip:padding-box;background-color:rgba(0,0,0,.08);border:solid transparent;border-width:1px;box-shadow:inset 1px 1px 0 rgba(0,0,0,.1),inset 0 -1px 0 rgba(0,0,0,.07);max-height:60px;min-height:28px;padding:100px 0 0}
+:not(.ios) ::-webkit-scrollbar-thumb:active,:not(.ios) ::-webkit-scrollbar-thumb:hover{background-color:rgba(0,0,0,.18)}
+:not(.ios) ::-webkit-scrollbar-track{background-clip:padding-box;background-color:rgba(0,0,0,.03)}
+:not(.ios) .chromeless .middle::-webkit-scrollbar-thumb,:not(.ios) .landing-side-bar::-webkit-scrollbar-thumb,:not(.ios) .landing::-webkit-scrollbar-thumb,:not(.ios) .log-view .log-view-output::-webkit-scrollbar-thumb,:not(.ios) .project-bar .dropdown-menu::-webkit-scrollbar-thumb{background-color:rgba(255,255,255,.25);box-shadow:inset 1px 1px 0 rgba(255,255,255,.1),inset 0 -1px 0 rgba(255,255,255,.07)}
+:not(.ios) .chromeless .middle::-webkit-scrollbar-thumb:active,:not(.ios) .chromeless .middle::-webkit-scrollbar-thumb:hover,:not(.ios) .landing-side-bar::-webkit-scrollbar-thumb:active,:not(.ios) .landing-side-bar::-webkit-scrollbar-thumb:hover,:not(.ios) .landing::-webkit-scrollbar-thumb:active,:not(.ios) .landing::-webkit-scrollbar-thumb:hover,:not(.ios) .log-view .log-view-output::-webkit-scrollbar-thumb:active,:not(.ios) .log-view .log-view-output::-webkit-scrollbar-thumb:hover,:not(.ios) .project-bar .dropdown-menu::-webkit-scrollbar-thumb:active,:not(.ios) .project-bar .dropdown-menu::-webkit-scrollbar-thumb:hover{background-color:rgba(255,255,255,.35)}
+:not(.ios) .landing::-webkit-scrollbar-track{background-color:#042e43}
+:not(.ios) .landing-side-bar::-webkit-scrollbar-track{background-color:#21272e}
+:not(.ios) .project-bar ::-webkit-scrollbar-track{background-color:#050505}
 .osc-secrets-form .advanced-secrets .help-blocks,.osc-secrets-form .advanced-secrets .input-labels,.osc-secrets-form .basic-secrets .help-blocks,.osc-secrets-form .basic-secrets .input-labels{display:table;padding-right:30px;position:relative;width:100%}
 .osc-secrets-form .advanced-secrets .help-blocks .help-block,.osc-secrets-form .advanced-secrets .help-blocks .input-label,.osc-secrets-form .advanced-secrets .input-labels .help-block,.osc-secrets-form .advanced-secrets .input-labels .input-label,.osc-secrets-form .basic-secrets .help-blocks .help-block,.osc-secrets-form .basic-secrets .help-blocks .input-label,.osc-secrets-form .basic-secrets .input-labels .help-block,.osc-secrets-form .basic-secrets .input-labels .input-label{width:100%;float:left;padding-right:5px}
 .osc-secrets-form .advanced-secrets .secret-row,.osc-secrets-form .basic-secrets .secret-row{display:table;padding-right:30px;position:relative;width:100%;margin-bottom:15px}