[Tabs] Animation error

[alexciesielski]

Bug, feature request, or proposal:

Bug

What is the expected behavior?

No errors

What is the current behavior?

MdTabBody.html:1 ERROR DOMException: Failed to execute 'animate' on 'Element': Partial keyframes are not supported.
at WebAnimationsPlayer._triggerWebAnimation (http://localhost:4200/vendor.bundle.js:67793:35)
at WebAnimationsPlayer.init (http://localhost:4200/vendor.bundle.js:67776:29)
at InjectableAnimationEngine.DomAnimationEngine._queuePlayer (http://localhost:4200/vendor.bundle.js:67067:16)
at InjectableAnimationEngine.DomAnimationEngine.animateTransition (http://localhost:4200/vendor.bundle.js:66982:14)
at InjectableAnimationEngine.DomAnimationEngine.setProperty (http://localhost:4200/vendor.bundle.js:66853:18)
at AnimationRenderer.setProperty (http://localhost:4200/vendor.bundle.js:94476:26)
at DebugRenderer2.setProperty (http://localhost:4200/vendor.bundle.js:13622:23)
at setElementProperty (http://localhost:4200/vendor.bundle.js:9897:19)
at checkAndUpdateElementValue (http://localhost:4200/vendor.bundle.js:9816:13)
at checkAndUpdateElementInline (http://localhost:4200/vendor.bundle.js:9750:24)
at checkAndUpdateNodeInline (http://localhost:4200/vendor.bundle.js:12443:23)
at checkAndUpdateNode (http://localhost:4200/vendor.bundle.js:12418:16)
at debugCheckAndUpdateNode (http://localhost:4200/vendor.bundle.js:13047:59)
at debugCheckRenderNodeFn (http://localhost:4200/vendor.bundle.js:13026:13)
at Object.eval [as updateRenderer] (ng:///MdTabsModule/MdTabBody.ngfactory.js:183:5)

What are the steps to reproduce?

1. Create an md-tab-group inside another md-tab-group and set property selectedIndex to a local variable [(selectedIndex)]="innerTabIndex".
2. Open the page, select the last tab on the inner tab group, generally jump between tabs
3. See that it throws an error.

Which versions of Angular, Material, OS, browsers are affected?

_                      _                 ____ _     ___

/ \ _ __ __ _ _ | | __ _ _ __ / | | | |
/ △ \ | ' \ / _ | | | | |/ _ | '| | | | | | |
/ ___ | | | | (| | || | | (| | | | || | | |
// __| ||_, |_,||_,|| _|||
|___/
@angular/cli: 1.0.0
node: 7.9.0
os: win32 x64
@angular/animations: 4.0.1
@angular/common: 4.0.1
@angular/compiler: 4.0.1
@angular/core: 4.0.1
@angular/forms: 4.0.1
@angular/http: 4.0.1
@angular/material: 2.0.0-beta.3
@angular/platform-browser: 4.0.1
@angular/platform-browser-dynamic: 4.0.1
@angular/router: 4.0.1
@angular/cli: 1.0.0
@angular/compiler-cli: 4.0.1

Tested on latest Chrome

[nithril]

Same issue using tooltip on chrome Version 60.0.3088.3

See this plunkr :
https://plnkr.co/edit/8zJMT9PJbNLxNT6wpAmH?p=preview

Does not reproduce on chrome 58 or on firefox.

[ahirhasmukh]

I have also fetch this error

[gm112]

I can reproduce this same error using the following. Would also like to point out that this same snippet worked just fine in 4.1.3. Might downgrade from 4.2 until this is fixed, however

<button md-icon-button [@buttonOffset]="offsetStatus">
	    <md-icon (click)="onToggleNavBarComponent()">menu</md-icon>
	</button>

[ghost]

Any progress on this?

[stephengeorgewest]

I posted in #3968, I'm not sure it is a tab specific issue. I'm getting it with no tabs. I too will have to roll back from 4.3.0

[andrewseguin]

Can you verify that this is still an issue? I believe this was something fixed in Core

[monoflash]

The problem remains as it was or again appeared in the code.
If slow, very slow move mouse over the matTooltip, then there is no error.
But if move mouse a little faster, and hit the next tooltip, then a lot of errors take off.

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}