diff --git a/src/platform/core/common/animations/collapse/collapse.animation.ts b/src/platform/core/common/animations/collapse/collapse.animation.ts
index b0baa0c0c3..4e83e8dd97 100644
--- a/src/platform/core/common/animations/collapse/collapse.animation.ts
+++ b/src/platform/core/common/animations/collapse/collapse.animation.ts
@@ -14,12 +14,10 @@ export function TdCollapseAnimation(duration: number = 150): AnimationEntryMetad
   return trigger('tdCollapse', [
     state('true', style({
       height: '0',
-      overflow: 'hidden',
       display: 'none',
     })),
     state('false',  style({
       height: '*',
-      overflow: 'hidden',
       display: '*',
     })),
     transition('0 => 1', animate(duration + 'ms ease-in')),
diff --git a/src/platform/core/expansion-panel/expansion-panel.component.html b/src/platform/core/expansion-panel/expansion-panel.component.html
index 283c882e55..f0c4952ace 100644
--- a/src/platform/core/expansion-panel/expansion-panel.component.html
+++ b/src/platform/core/expansion-panel/expansion-panel.component.html
@@ -28,10 +28,18 @@
     </a>
   </md-nav-list>
   <div>
-    <div class="td-expansion-content" [@tdCollapse]="!expand">
+    <div class="td-expansion-content"
+         [@tdCollapse]="!expand"
+         [style.overflow]="hideContentOverflow ? 'hidden' : null"
+         (@tdCollapse.start)="hideContentOverflow = !hideContentOverflow"
+         (@tdCollapse.done)="hideContentOverflow = !hideContentOverflow">
       <ng-content></ng-content>
     </div>
-    <div class="td-expansion-summary" [@tdCollapse]="expand">
+    <div class="td-expansion-summary"
+         [@tdCollapse]="expand"
+         [style.overflow]="hideSummaryOverflow ? 'hidden' : null"
+         (@tdCollapse.start)="hideSummaryOverflow = !hideSummaryOverflow"
+         (@tdCollapse.done)="hideSummaryOverflow = !hideSummaryOverflow">
       <ng-content select="td-expansion-summary"></ng-content>
     </div>
   </div>
diff --git a/src/platform/core/expansion-panel/expansion-panel.component.scss b/src/platform/core/expansion-panel/expansion-panel.component.scss
index b25cc5ef1d..b5942b4024 100644
--- a/src/platform/core/expansion-panel/expansion-panel.component.scss
+++ b/src/platform/core/expansion-panel/expansion-panel.component.scss
@@ -38,8 +38,4 @@ md-nav-list {
   overflow: hidden;
   text-overflow: ellipsis;
   margin-right: 5px;
-}
-.td-expansion-content,
-.td-expansion-summary {
-  overflow: hidden; // FF50 bugfix since overflow style in animation doesnt work
-}
+}
\ No newline at end of file
diff --git a/src/platform/core/expansion-panel/expansion-panel.component.spec.ts b/src/platform/core/expansion-panel/expansion-panel.component.spec.ts
index 00449315c5..e6149ccbee 100644
--- a/src/platform/core/expansion-panel/expansion-panel.component.spec.ts
+++ b/src/platform/core/expansion-panel/expansion-panel.component.spec.ts
@@ -81,7 +81,7 @@ describe('Component: ExpansionPanel', () => {
         expect(fixture.debugElement.query(By.css('.td-expansion-content'))).toBeTruthy();
 
         expect((<HTMLElement>fixture.debugElement.query(By.css('.td-expansion-content')).nativeElement)
-        .style.overflow).toBe('hidden');
+        .style.display).toBe('none');
 
         expect((<HTMLElement>fixture.debugElement.query(By.css('.td-expansion-summary')).nativeElement)
         .style.display).toBe('');
diff --git a/src/platform/core/steps/step-body/step-body.component.html b/src/platform/core/steps/step-body/step-body.component.html
index 8a662ca8fc..01e4acfba4 100644
--- a/src/platform/core/steps/step-body/step-body.component.html
+++ b/src/platform/core/steps/step-body/step-body.component.html
@@ -1,7 +1,11 @@
 <div layout="row" flex>
   <ng-content></ng-content>
   <div flex>
-    <div class="td-step-content-wrapper" [@tdCollapse]="!active">
+    <div class="td-step-content-wrapper"
+         [@tdCollapse]="!active"
+         [style.overflow]="hideContentOverflow ? 'hidden' : null"
+         (@tdCollapse.start)="hideContentOverflow = !hideContentOverflow"
+         (@tdCollapse.done)="hideContentOverflow = !hideContentOverflow">
       <div #contentRef [class.td-step-content]="contentRef.children.length || contentRef.textContent.trim()">
         <ng-content select="[td-step-body-content]"></ng-content>
       </div>
@@ -9,7 +13,11 @@
         <ng-content select="[td-step-body-actions]"></ng-content>
       </div>
     </div>
-    <div #summaryRef [@tdCollapse]="active || !isComplete()" [class.td-step-summary]="summaryRef.children.length || summaryRef.textContent.trim()">
+    <div #summaryRef [@tdCollapse]="active || !isComplete()"
+                     [style.overflow]="hideSummaryOverflow ? 'hidden' : null"
+                     (@tdCollapse.start)="hideSummaryOverflow = !hideSummaryOverflow"
+                     (@tdCollapse.done)="hideSummaryOverflow = !hideSummaryOverflow"
+                     [class.td-step-summary]="summaryRef.children.length || summaryRef.textContent.trim()">
       <ng-content select="[td-step-body-summary]"></ng-content>
     </div>
   </div>
diff --git a/src/platform/core/steps/step-body/step-body.component.scss b/src/platform/core/steps/step-body/step-body.component.scss
index a443d6d189..e69de29bb2 100644
--- a/src/platform/core/steps/step-body/step-body.component.scss
+++ b/src/platform/core/steps/step-body/step-body.component.scss
@@ -1,4 +0,0 @@
-.td-step-summary,
-.td-step-content-wrapper {
-  overflow: hidden; // FF50 bugfix since overflow style in animation doesnt work
-}