Dialog enter animation sometimes behaves strangely on chrome

[nSharifA]

Description

I think this might be a chrome bug, but not sure. When i open a dialog with sizes set in percentages, and with a complex layout inside (lot of flexlayouts + details + grid with data). Then in chromium based browsers it looks like the opening animation runs twice (dialog shows -> dialog disappear-> dialog shows) really fast, see the video (I blurred the app out because of the data). https://user-images.githubusercontent.com/25901862/191273988-bf774b37-0ef8-4a4c-b530-050b18756a18.mp4

Additional info: I couldn't reproduce the issue in a simple mock app (Sorry). There is no custom css or javascript overriding any vaadin component. Dialog is opened with calling the .open() method once. No async+push thing in the background. Without the Grid or Details component in the dialog or with fixed dialog sizes the animation looks fine. Firefox doesn't have this problem

I'm not a css expert but i've looked at the css code and found the default animation code in vaadin-dialog-styles.js:

  :host([opening]) [part="overlay"] {
    animation: 0.12s 0.05s vaadin-dialog-enter cubic-bezier(.215, .61, .355, 1) both;
  }

  @keyframes vaadin-dialog-enter {
    0% {
      opacity: 0;
      transform: scale(0.95);
    }
  }

I tried my best and by modifying the code this way fixes the animation:

  :host([opening]) [part="overlay"] {
    animation: 0.12s 0.05s vaadin-dialog-enter cubic-bezier(.215, .61, .355, 1) both;
  }

  @keyframes vaadin-dialog-enter {
    0% {
      opacity: 0;
      transform: scale(0.95);
    }
    100% {
      opacity: 1;
      transform: scale(1);
    }
  }

I don't know why works this way but not other. Sorry if this description is not sufficient, You can close it if you want, my problem is solved anyway with the code above.

Expected outcome

-

Minimal reproducible example

-

Steps to reproduce

-

Environment

Vaadin version(s): 14.8.11 OS: Windows 10 Browser: chrome (105.0.5195.127) edge

Browsers

Chrome, Edge

[yuriy-fix]

@jouni, do you think it would make sense to apply same changes to the dialog?

[jouni]

If it fixes the issue, I think it could be worth to add the extra styles (the end keyframe).