Element: [Bug Report] Sequential calls of `$msgbox` is not working with safari

[wonyeouuu]

Element UI version

2.3.6

OS/Browsers version

macOS Sierra 10.12 / Safari 10.0

Vue version

2.5.16

Reproduction Link

https://jsfiddle.net/4z6wojzw/4/

Steps to reproduce

call $msgbox sequentially (also happens with $alert, $prompt, $confirm) in safari

async mounted () {
  await this.$alert('alert')
  await this.$alert('this dialog will flash and disappear')
  /*
  setTimeout(() => {
    this.$alert('but this will work')
  }, 400) // interval >= 400ms will resolve this issue (400 is a magic number)
  */
}

What is Expected?

I expect when I click confirm in the first dialog, it should show the second dialog and I can do whatever it should let me do.

What is actually happening?

The second dialog flash and disappear, so I can't do anything with it.

[ianberdin]

If remove from message-box.scss animation with opacity, then all works.

We have some ugly fix, replacing animation by transition:

// message-box.scss

.msgbox-fade-enter {
  opacity: 0;
}

.msgbox-fade-enter-active {
  transition: all .15s ease;
}

.msgbox-fade-leave-active {
  opacity: 0;
  transition: all .3s ease;
}

[sunchenguang]

same issue. wait for fix

[allen2001]

same issue in mac safari . wait for fix

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.