Animation flashes on second open

[alan-strohm]

You can see it easiest on bigger dropdowns (e.g. scrolling and margin)
https://www.polymer-project.org/components/paper-dropdown/demo.html

Clicking the first time causes the dropdown to smoothly animate. Clicking outside the dropdown or selecting an item in the dropdown and then toggling it again causes the expanded state to flash open, then flash close and then animate.

[miuzel]

It seems that this happens only in Chrome 39. Did not observed this before I upgraded Chrome from 38.

[morethanreal]

I think it's due to this bug: web-animations/web-animations-next#260. Also see googlearchive/paper-dropdown-menu#45.

[miuzel]

the transitionOpened function does this.super(arguments); which gives the dropdown a core-opened class say opacity: 1 . When closing the dropdown , only this.super is executed which gives the dropdown a core-closed class say opacity: 0 (btw, I cannot find the definition of this core-closed class in core-transition). The dropdown is just hidden and not rescaled. before the openning animation goes, the dropdown is rendered and shown as if it has already be opened. I guess something like rendering sequences or triggers changed in Chrome 39?

[miuzel]

I tried to add a closing animation in transitionOpened which reverses the opening one and the dropdown don't flash out when reopened.

[morethanreal]

Should be fixed in googlearchive/core-animation@ce0a08e

[ryw]

I tried updating our project:

"core-animation": "Polymer/core-animation#master"

bower then brings web-animations-js 1.0.5 in as expected.

But I'm still seeing the same flash when opening the dropdown a second time within the app — in Chrome 39. 😞

[morethanreal]

Argh, I can also reproduce in Chrome 39. Reopening.

[PiotrChojniak]

I think that this flash is a consequence of a delay on the 'background' div. See 'transitionOpened' (line 103).

[miuzel]

When the dropdown is closed, the opacity has not been set to 0. When it is being opened the hidden attribute is removed. I think this makes the dropdown appear before the animation start.

I added a fadeout animation when closing the dropdown and the dropdown didn't flash any more.

[ryw]

@miuzel where did you put this fadeout? really want to patch this in our app :)

[RobertLowe]

@miuzel yeah, how did you solve that? Mind posting a gist?
@ryw oh nice to see you here. :P

[ryw]

Hi @RobertLowe :)

I just tested your change (removing line 103) but that didn't fix in my app — removing line 121 fixed mine... so I wonder if something in all of the delays needs addressed?

[RobertLowe]

@ryw Weird, because my app is based on: https://github.com/Differential/polymer-demo So I think we have similar codebases.

I didn't find the root problem, but after enough poking around, I found that solution. It's suspect that 103 works for me and 121 works for you. Can you share your bower.json perhaps? Maybe both delays should be removed? Any got some insight here?

Glad you found a solution at least!

Cheers.

[miuzel]

@RobertLowe @ryw
I had problem access github. Finally I managed to post a gist, I have not fully tested the work arround yet. you can try it.
https://gist.github.com/miuzel/aafa266f8a85471aab65

Just fadeout every thing when closing the dropdown.