Unpleasant flash from modal window transition

I’m seeing this with my own Vaadin 7.3.7 application, and also with the online demo at http://demo.vaadin.com/sampler/#ui/structure/window

When pulling up a modal window in my application, the background fades to black and the window pops into position. These transitions look great under Firefox, but under Chrome there is an unpleasant flash effect from the background. It looks likes it first jumps straight to black, then back to white before fading smoothly to black.

The Vaadin online demo seems to have the same flashing effect under Chrome. (To see this, pull up a window, then check/uncheck the modal checkbox.) But even under Firefox the demo usually flashes. Occasionally it seems to transition smoothly though.

I got a complaint from my client about it, so if possible I would like to change or disable the background’s model window transition. Is that possible? Other suggestions also welcome.

(These are current versions of Firefox and Chrome running on a Mac. My client is running on a PC but I don’t have his browser details.)

Small update: I was able to slow down the transition by:

  1. compiling the theme to styles.css
  2. editing the “.vedashboard .v-window-modalitycurtain” section
  3. adjusting the fade-in parameters

So I should be able to override the transition if I can’t fix it. Slowed down, it appears that the modal window appears and the background turns dark, instantly. Then the background goes back to fully visible, and s-l-o-w-l-y transitions to dark.

Slowed down, both Firefox and Chrome display that flashing behavior. It may be that Firefox doesn’t show the flash at full speed because it doesn’t draw that first moment where the modal window is up and the background is dark.

Suggestions still welcome. If I can’t figure out a way to make the background stay transparent at the outset, I’ll try to disable the transitions entirely, at least on Chrome.

Matthew-

This is a known issue:
https://vaadin.com/forum/#!/thread/8771546/8773315

Regards,
Eric

Perfect- thanks for the info!

(For the record, I DID search for before posting. The keywords can be a bit subjective for something like this, but I’m sure I included “flash” in some of the searches… Either I was careless or it’s time to switch search engines again. :slight_smile: