diff --git a/src/common.css b/src/common.css
index aa2eb136d..d63575f95 100644
--- a/src/common.css
+++ b/src/common.css
@@ -17,6 +17,15 @@
   top: 0px !important;
 }
 
+/* send offscreen without breaking sizes*/
+.ui-select-detached {
+    position: fixed !important;
+    opacity: 0 !important;
+    visibility: hidden;
+    top: 100% !important;
+    left: 100% !important;
+    z-index: -1 !important;
+}
 
 .ui-select-choices-row:hover {
   background-color: #f5f5f5;
diff --git a/src/uiSelectDirective.js b/src/uiSelectDirective.js
index 285cfb4ac..9055b538e 100644
--- a/src/uiSelectDirective.js
+++ b/src/uiSelectDirective.js
@@ -373,7 +373,7 @@ uis.directive('uiSelect',
             }
 
             // Display the dropdown once it has been positioned.
-            dropdown[0].style.opacity = 1;
+            dropdown[0].classList.remove('ui-select-detached');
           });
         };
 
@@ -389,7 +389,7 @@ uis.directive('uiSelect',
 
            // Hide the dropdown so there is no flicker until $timeout is done executing.
            if ($select.search === '' && !opened) {
-              dropdown[0].style.opacity = 0;
+              dropdown[0].classList.add('ui-select-detached');
               opened = true;
            }
 
@@ -411,7 +411,7 @@ uis.directive('uiSelect',
             }
 
             // Reset the position of the dropdown.
-            dropdown[0].style.opacity = 0;
+            dropdown[0].classList.add('ui-select-detached');
             dropdown[0].style.position = '';
             dropdown[0].style.top = '';
             element.removeClass(directionUpClassName);