Skip to content

Commit

Permalink
chore(tabs): revert workaround for angular < 2.3
Browse files Browse the repository at this point in the history
Reverts a workaround that was preventing the tabs from crashing the user's browser in Angular < 2.3, due to an animations issue. This was introduced initially in angular#2411.
  • Loading branch information
crisbeto committed Apr 17, 2017
1 parent d20a4ca commit b2a3c81
Show file tree
Hide file tree
Showing 3 changed files with 3 additions and 45 deletions.
2 changes: 1 addition & 1 deletion src/lib/tabs/tab-body.html
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
<div class="mat-tab-body-content" #content
[@translateTab]="_canBeAnimated ? _position : null"
[@translateTab]="_position"
(@translateTab.start)="_onTranslateTabStarted($event)"
(@translateTab.done)="_onTranslateTabComplete($event)">
<ng-template cdkPortalHost></ng-template>
Expand Down
13 changes: 0 additions & 13 deletions src/lib/tabs/tab-body.spec.ts
Original file line number Diff line number Diff line change
Expand Up @@ -170,19 +170,6 @@ describe('MdTabBody', () => {
}));
});

it('should toggle the canBeAnimated flag', () => {
let fixture: ComponentFixture<SimpleTabBodyApp>;
let tabBody: MdTabBody;

fixture = TestBed.createComponent(SimpleTabBodyApp);
tabBody = fixture.componentInstance.mdTabBody;

expect(tabBody._canBeAnimated).toBe(false);

fixture.detectChanges();

expect(tabBody._canBeAnimated).toBe(true);
});
});


Expand Down
33 changes: 2 additions & 31 deletions src/lib/tabs/tab-body.ts
Original file line number Diff line number Diff line change
Expand Up @@ -7,9 +7,7 @@ import {
OnInit,
ElementRef,
Optional,
ChangeDetectorRef,
AfterViewChecked,
AfterContentChecked,
} from '@angular/core';
import {
trigger,
Expand Down Expand Up @@ -75,7 +73,7 @@ export type MdTabBodyOriginState = 'left' | 'right';
])
]
})
export class MdTabBody implements OnInit, AfterViewChecked, AfterContentChecked {
export class MdTabBody implements OnInit, AfterViewChecked {
/** The portal host inside of this container into which the tab body content will be loaded. */
@ViewChild(PortalHostDirective) _portalHost: PortalHostDirective;

Expand All @@ -102,9 +100,6 @@ export class MdTabBody implements OnInit, AfterViewChecked, AfterContentChecked
}
}

/** Whether the element is allowed to be animated. */
_canBeAnimated: boolean = false;

/** The origin position from which this tab should appear when it is centered into view. */
_origin: MdTabBodyOriginState;

Expand All @@ -120,10 +115,7 @@ export class MdTabBody implements OnInit, AfterViewChecked, AfterContentChecked
}
}

constructor(
@Optional() private _dir: Dir,
private _elementRef: ElementRef,
private _changeDetectorRef: ChangeDetectorRef) { }
constructor(@Optional() private _dir: Dir, private _elementRef: ElementRef) { }

/**
* After initialized, check if the content is centered and has an origin. If so, set the
Expand All @@ -145,27 +137,6 @@ export class MdTabBody implements OnInit, AfterViewChecked, AfterContentChecked
}
}

/**
* After the content has been checked, determines whether the element should be allowed to
* animate. This has to be limited, because under a specific set of circumstances (see #2151),
* the animations can be triggered too early, which either crashes Chrome by putting it into an
* infinite loop (with Angular < 2.3.0) or throws an error because the element doesn't have a
* computed style (with Angular > 2.3.0). This can alternatively be determined by checking the
* transform: canBeAnimated = getComputedStyle(element) !== '', however document.contains should
* be faster since it doesn't cause a reflow.
*/
ngAfterContentChecked() {
// TODO: This can safely be removed after we stop supporting Angular < 2.4.2. The fix landed via
// https://github.com/angular/angular/commit/21030e9a1cf30e8101399d8535ed72d847a23ba6
if (!this._canBeAnimated) {
this._canBeAnimated = document.body.contains(this._elementRef.nativeElement);

if (this._canBeAnimated) {
this._changeDetectorRef.markForCheck();
}
}
}

_onTranslateTabStarted(e: AnimationEvent) {
if (this._isCenterPosition(e.toState)) {
this.onCentering.emit(this._elementRef.nativeElement.clientHeight);
Expand Down

0 comments on commit b2a3c81

Please sign in to comment.