Element: [Bug Report] Weird jump on dropdown animation in Chrome

[websanova]

Element UI version

2.8.2

OS/Browsers version

Windows Chrome Version 74.0.3729.131 (Official Build) (64-bit)

Vue version

2.6.10

Reproduction Link

https://jsfiddle.com

Steps to reproduce

Seems to be happening everywhere, can even check the main demo site.

Only chrome, all the dropdowns do this weird bounce. You can see it on your own site (all versions).

https://element.eleme.io/2.8/#/en-US/component/dropdown

What is Expected?

remove the bounce

What is actually happening?

weird bounce

[zuibunan]

same problem

[fluentwind]

same problem
transition 'el-zoom-in-top' triggered twice in Chrome 74
maybe something changed when processing multiple transition in CHROME at
transition: transform .3s cubic-bezier(.23, 1, .32, 1), opacity .3s cubic-bezier(.23, 1, .32, 1), -webkit-transform .3s cubic-bezier(.23, 1, .32, 1);

[makaria]

tried .el-zoom-in-top-enter, .el-zoom-in-top-enter-active { transition-property: transform; }
The transition doesn't seem to trigger twice any more, but it may not trigger once at all.

[claviska]

Can't post a video and GIFs don't have a good enough frame rate to show it properly, but here's what it looks like in the docs.

[coffeeyen]

same problem at chrome v75, I tried element-ui v2.0.11-v2.9.1, it always happened, but is OK with element-ui v1.43

[edum18]

+1

[trananhmanh89]

on chrome 76, it's gone.

[island205]

@trananhmanh89 so, issue closed

[claviska]

This is indeed fixed in Chrome 76. Any idea what the cause was?

[island205]

@claviska We only know this issue happens when we use scaleY css transition.

[Fuphoenixes]

Is there any way to solve it?

[minhail]

@Fuphoenixes
我比较了别的ui框架，用animation覆盖掉element原有的transition动画，就解决了。