animations affect other animations

[beta-vulgaris]

Description

In our webapplication we have a navigation bar, which also allows searching in a paper-input. The navigation bar contains neon-animated-pages and animates from right-to-left/left-to-right for forward/backward steps. The navigation bar contains items within iron-collapse elements.

In some circumstances the paper-input animation of the underline affects other elements that are animated. During the animation the content of neon-animated-pages gets shifted to the upper left. Also, the iron-collapse animation sometimes affects the content of neon-animated-pages. Changing the duration of the animation in paper-input (actually: paper-input-container) will also change how long the contents get shifted.

Unfortunately I couldn't make out yet why and under which circumstances this behavior occurs. I could also not recreate this in a setup on jsbin and can't share our webapp. I have this behavior on Chrome 53.0.2785.143 m (64-bit), but can't reproduce it on 49.0.1.

I fear that this might be an issue related to: http://stackoverflow.com/questions/17242922/css3-hover-effects-make-weird-impact-on-other-elements-in-chrome

Could it also be related to #205?

A workaround seems to be to set a different z-index for each of the animated elements. Unfortunately this is not very practical.

Expected outcome

The paper-input underline animates on its own.

Actual outcome

The neon-animated-pages get shifted to the top-left while the paper-input animation is running.

Live Demo

This demo does not exhibit the same behavior, but showcases what setup I'm speaking of: https://jsbin.com/zoyomibigu/1/edit?html,output

[victoriaSh]

+1 I have iron-selector with paper-items inside. When I click on paper-item "slide-from-right-animation" of parent "neon-animated-pages" is called.

[manfield]

We've a similar issue (tested on Chrome 54, OSX 10) using slide-from-right/left animations. Here what happens on a simple page, created with the starter kit: http://screencast.com/t/dmPFSpJdIQGz

But in our application templates, where many elements are in place, it messes the page completely.

We had to switch to fade-in/out animation. Thanks!

Note: it does not always happen. It's absolutely random.

[manfield]

Hi there. Any update about it? Thanks