Why opening a modal window is blinking background?

Vaadin 6 / 7 / 8
1

Hi,

Try to open a modal dialog window:

http://demo.vaadin.com/valo-theme/#!common

Why opening a modal window is blinking background?

Thanks,
Dmitry

2

I don’t see any blinking. There’s a fade-to-dark animation of the modality curtain, which covers the background behind the dialog window. I suppose the animation could bug in some browser. Which browser, version, and operating system?

3

Hi Marko,

I see the same thing:
Ubuntu 14.04 / Win 7
Chrome 41.0.2272.118 (64-bit)
Firefox 37.0.1 (only checked on Ubuntu)

Instead of fading, the animation produces a flash before the window displays.
​It’s a little better on Firefox, but only barely.

No problems on IE9 (the only version I have available, unfortunately), so perhaps this has something to do with recent browser versions?

Regards

4

Ok, I can see it now in Chrome (Ubuntu 14.04). It’s actually also in Firefox, but it’s just too slow to render the animation and the animation needs to be slowed down to see it.

The v-window-modalitycurtain class seems to have:

.v-window-modalitycurtain {
  background-color: #222;
  background-image: radial-gradient(circle at 50% 50% , #222, #0e0e0e);
  opacity: 0.72;
  animation: valo-animate-in-fade 400ms 100ms;
  ...

As the animation has a 100ms delay, it apparently first shows the semi-transparent (opacity 0.72) dark background and after those 100ms then starts the 400ms animation from fully transparent background (opacity 0), hence causing the flicker. Apparently, there’s already some flicker-prevention for Opera in the Valo code in valo/components/_window.scss:

... @include opacity(max(0.2, 0.8 - valo-gradient-opacity()/100%)); @if $v-animations-enabled { @include valo-animate-in-fade($duration: 400ms, $delay: 100ms); .v-op12 & { // Opera 12 has a shitbreak with the fade-in (flickers) @include animation(none); } } So, I’d guess that that delay should be set to 0 or the animation logic should be something different.

Ah, there’s actually already
ticket #14806
 about it, and further the underlying issue in
#14873
. It looks like there’s even a fix for it, but it’s been delayed for some time now in code review because of problems.

Anyhow, I hope the above helps in working around the issue - just set the animation delay to 0 OR just disable the animation altogether.