Partial keyframes with hero-animation and delegated animation

[timeu]

Description

I have a somewhat weird bug. I have following DOM structure:

<neon-animated-pages>
   <a-page></a-page>
   <b-page></b-page>
   <c-page></c-page>
</neon-animated-pages>

<a-page> and <b-page> both implement the NeonSharedElementAnimatableBehavior behavior and they define a hero-animation with a sharedElements property. Navigating between <a-page> and <b-page> will properly do the hero-animation.

<c-page> is a bit different and only implements NeonAnimatableBehavior and delegates the animation to a sub-element <c-page-child> which itself implements the NeonSharedElementAnimatableBehavior.

<c-page>:

properties: {
  animationConfig: {
    value: function() {
      return {
         'entry': [{animatable: this.$.child, type: 'entry'},],
         'exit': [{animatable: this.$.child, type: 'exit'},]
       }
     }
},

However when I try to navigate from <a-page> or <b-page> to <c-page> I get following error:

Couldnt play ( hero-animation ). DOMException: Failed to execute 'animate' on 'Element': Partial keyframes are not supported.(…)

I tried to debug the issue and it seems to be a combination of a timing issue and the getBoundingRect() function on one of the hero elements returns 0 width and height, which leads to following keyframe: transform("translate(453px,199px) scale(Infinity,Infinity)") which causes the partial keyframe issue.

However this behavior changes when I put a breakpoint in the hero-animation behavior.

If I set the breakpoint right at this line, the call to shared.to.getBoundingClientRect() will return 0 height and width (see picture 1)

However if I set the breakpoint one line before and then step through, getBoundingClientRect() will return correct width and height values (see picture 2).

The behavior stays the same even when I specify explicit sizes for the hero image.

Browsers Affected

• [x] Chrome
• [ ] Firefox
• [ ] Safari 9
• [ ] Safari 8
• [ ] Safari 7
• [ ] Edge
• [ ] IE 11
• [ ] IE 10