diff --git a/src/client/ui/index.js b/src/client/ui/index.js
index 1df0db2758a..f15fba14c21 100644
--- a/src/client/ui/index.js
+++ b/src/client/ui/index.js
@@ -19,6 +19,8 @@ const HIDE_RESPONSE_CMD = 'ui|hide|response';
 const SHOW_REQUEST_CMD  = 'ui|show|request';
 const SHOW_RESPONSE_CMD = 'ui|show|response';
 
+const HIDDEN_CLASS = 'hidden';
+
 // Setup cross-iframe interaction
 messageSandbox.on(messageSandbox.SERVICE_MSG_RECEIVED_EVENT, e => {
     if (e.message.cmd === HIDE_REQUEST_CMD) {
@@ -41,12 +43,12 @@ exports.IframeStatusBar = IframeStatusBar;
 
 exports.get = require;
 
-
 exports.hide = function (hideTopRoot) {
     if (hideTopRoot)
         return sendRequestToFrame({ cmd: HIDE_REQUEST_CMD }, HIDE_RESPONSE_CMD, window.top);
 
-    hammerhead.shadowUI.getRoot().style.visibility = 'hidden';
+    hammerhead.shadowUI.addClass(hammerhead.shadowUI.getRoot(), HIDDEN_CLASS);
+
     return Promise.resolve();
 };
 
@@ -54,7 +56,8 @@ exports.show = function (showTopRoot) {
     if (showTopRoot)
         return sendRequestToFrame({ cmd: SHOW_REQUEST_CMD }, SHOW_RESPONSE_CMD, window.top);
 
-    hammerhead.shadowUI.getRoot().style.visibility = '';
+    hammerhead.shadowUI.removeClass(hammerhead.shadowUI.getRoot(), HIDDEN_CLASS);
+
     return Promise.resolve();
 };
 
diff --git a/src/client/ui/styles.less b/src/client/ui/styles.less
index 710b13d92d5..575b6c859f0 100644
--- a/src/client/ui/styles.less
+++ b/src/client/ui/styles.less
@@ -22,6 +22,14 @@
     -moz-transition: none !important;
     -o-transition: none !important;
 
+    &.hidden {
+        visibility: hidden;
+
+        * {
+            visibility: hidden !important;
+        }
+    }
+
     .layout-default();
 
     /*Mixins*/