diff --git a/skyux-spa-visual-tests/src/app/popover/popover-visual.component.scss b/skyux-spa-visual-tests/src/app/popover/popover-visual.component.scss
index 46c99b29d..0fc76fc54 100644
--- a/skyux-spa-visual-tests/src/app/popover/popover-visual.component.scss
+++ b/skyux-spa-visual-tests/src/app/popover/popover-visual.component.scss
@@ -15,6 +15,7 @@
   .sky-popover-container {
     position: static !important;
     opacity: 1 !important;
+    visibility: visible !important;
   }
 }
 
diff --git a/src/app/components/popover/popover-demo.component.scss b/src/app/components/popover/popover-demo.component.scss
index 4a7651e29..c470540f7 100644
--- a/src/app/components/popover/popover-demo.component.scss
+++ b/src/app/components/popover/popover-demo.component.scss
@@ -16,6 +16,7 @@
     position: static !important;
     width: 100% !important;
     opacity: 1 !important;
+    visibility: visible !important;
 
     .sky-popover {
       margin: 0;
diff --git a/src/modules/popover/popover.component.html b/src/modules/popover/popover.component.html
index f3071f1e6..ff263cc1a 100644
--- a/src/modules/popover/popover.component.html
+++ b/src/modules/popover/popover.component.html
@@ -1,4 +1,4 @@
-<div class="sky-popover-container hidden"
+<div class="sky-popover-container"
   [ngClass]="'sky-popover-placement-' + placement"
   (@popoverState.start)="onAnimationStart($event)"
   (@popoverState.done)="onAnimationDone($event)"
diff --git a/src/modules/popover/popover.component.scss b/src/modules/popover/popover.component.scss
index 45101032f..b15802537 100644
--- a/src/modules/popover/popover.component.scss
+++ b/src/modules/popover/popover.component.scss
@@ -22,14 +22,11 @@ $popover-max-width: 276px;
 }
 
 .sky-popover-container {
+  visibility: hidden;
+  opacity: 0;
   position: absolute;
   z-index: 9999;
 
-  &.hidden {
-    left: -99999px !important;
-    right: auto !important;
-  }
-
   @media (max-width: $sky-screen-xs-max) {
     left: 0 !important;
     right: 0;
diff --git a/src/modules/popover/popover.component.spec.ts b/src/modules/popover/popover.component.spec.ts
index 6c5cbbfc0..452c9d8c3 100644
--- a/src/modules/popover/popover.component.spec.ts
+++ b/src/modules/popover/popover.component.spec.ts
@@ -206,7 +206,7 @@ describe('SkyPopoverComponent', () => {
     document.dispatchEvent(escapeEvent);
 
     fixture.detectChanges();
-    const element = fixture.debugElement.query(By.css('.sky-popover-container.hidden'));
+    const element = fixture.debugElement.query(By.css('.sky-popover-container'));
 
     expect(component.close).toHaveBeenCalled();
     expect(element.nativeElement).toBeDefined();
diff --git a/src/modules/popover/popover.component.ts b/src/modules/popover/popover.component.ts
index 170666c4e..a613a8e95 100644
--- a/src/modules/popover/popover.component.ts
+++ b/src/modules/popover/popover.component.ts
@@ -29,7 +29,7 @@ import { SkyPopoverPlacement, SkyPopoverAdapterService } from './index';
   providers: [SkyPopoverAdapterService],
   animations: [
     trigger('popoverState', [
-      state('visible', style({ opacity: 1 })),
+      state('visible', style({ opacity: 1, visibility: 'visible' })),
       state('hidden', style({ opacity: 0 })),
       transition('hidden => visible', animate('150ms')),
       transition('visible => hidden', animate('150ms'))