AngularJS Animation Breaking `position: fixed` Element in Chrome

Question

Working in Chrome, I found the AngularJS animations appear to break elements that have position: fixed applied to them. I can not reproduce the issue in Safari or Firefox.

I'm unsure if I'm doing something wrong, or if I could be doing something better to fix the issue.

I have a Plunker illustrating the issue here: http://plnkr.co/edit/fhI7M7ev75AGYzesf4GB?p=preview

To reproduce, the following must be done (as the layout of Plunker seems to fix the issue):

1. Run the Plunk (in Chrome)
2. Breakout the preview into a new window
3. Reduce the height to show just the colored box
4. Click on the "Click Me" button and then scroll to witness issue

If you reload the scrolling list page the top banner will be correctly fixed to the top.

The CSS for the top banner is simple:

.fplcd-top-banner {
  background-color: #7c7c7c;
  background: linear-gradient(to bottom, #7c7c7c, #666666);
  height: 50.15745px;
  left: 0;
  margin-bottom: 7.16535px;
  padding: 7.16535px;
  position: fixed;
  top: 0;
  width: 320px;
  z-index: 10; }

If you edit the plunk and remove the animation (at the bottom of the CSS file, comment above them) styles, the issue no longer persists.

Is this a known issue, or am I doing something just odd enough that would knock Chrome out of whack? In either case, is there a tweak that can be done to fix this up?