Flashing screen on window open

Vaadin 6 / 7 / 8 Framework UI
1

When opening a window I get a strange flashing in my app.
What exactly happens is that when window opens, rest of screen turns grey, like normal when the window is modal, and then turn momentarily white and immediately again grey.
Like, after the window is attached, it’s looses focus for a moment and gains it back.

Although I noticed that this effect appears in Chrome and not in Firefox.

Does anyone have any idea for the reason?

2

This is caused by the fade-in animation of the modality curtain in Valo, which has a 100ms delay, but fails to specify the “backwards” keyword for the animation, which would make the style of the modality curtain be the first keyframe value during the delay. Now it is fully visible for the duration of the delay, then the animation starts from 0 opacity and fades to the end opacity.

There’s an easy fix for this, but it hasn’t been patched yet. It’s in the pipeline, hopefully in the next maintenance release.

You can make a local workaround to your own theme like this (mytheme.scss):

@import "../valo/valo";

.mytheme {
  @include valo;

  .v-window-modalitycurtain {
    @include animation(valo-animate-in-fade 400ms 100ms backwards);
  }
}
3

Thanks for your reply Jouni.
I managed to solve the problem but in strange way.
The css i used was:

.v-window-modalitycurtain {
@include animation(valo-animate-in-fade 400ms 100ms backwards);
}

That’s because in the rest of the style.css, I couldn’t find ‘.v-window-modality-curtain’ field but only ‘.v-window-modalitycurtain’.

I wasn’t sure if this a bug (typo) in the valo’s css code, so I gave it a try and it worked.

4

Indeed, I mistyped the CSS class, thanks for pointing that out. I fixed the previous post.

Edit: Here’s the relevant ticket for this issue:
http://dev.vaadin.com/ticket/14873

5

I have been trying to fix this exact problem, since the flash that accompanies opening a new window is almost seizure inducing. I tried both of the suggestions above, and I still get the annoying flash. I’m currently using Vaadin 7.3.9, and I have tried the app on both Chrome and IE, and the results are the same.
After compiling the theme, the css file contains what appears to be the correct config for the modalitycurtain animation, but my IDE (NetBeans) reports that the radial-gradient line contains an unreckognized character. That line if prior to the backwards setting, so I’m wondering if that block is not parsed after that error. Here is the compiled css code:

.mytheme .v-window-modalitycurtain { position: fixed; top: 0; right: 0; bottom: 0; left: 0; background-color: #222; background-image: -webkit-radial-gradient(50% 50%, circle, #222, #030303); background-image: radial-gradient( circle at 50% 50%, #222, #030303); opacity: 0.68; filter: alpha(opacity=68) ; -webkit-animation: valo-animate-in-fade 400ms 100ms; -moz-animation: valo-animate-in-fade 400ms 100ms; animation: valo-animate-in-fade 400ms 100ms; } Any ideas? Thanks.

6

Regarding my previous post - I had included some older animation add-ons in my pom file, when I get rid of those, the flashing stopped.
Thanks again for a great product!

7

Hi folks. How can I simple disable the Valo loading blink? I’ve

I found in another thread a way to use a “modal” loading indicator that appears after a short period of time, and its working nice, but after some time, it begins to blink (as the original loading progress bar on top), and it will be nice to disable in my use case.

Bellow, the CSS changes that I’m using:

.v-loading-indicator[style*="none"]
:before {
        display: none;
   }
   
   .v-loading-indicator-delay:before, .v-loading-indicator-wait:before {
          content: "";
          position: fixed;
          background-color: rgba(0,0,0,.5);
          background-image: url(images/preloader.gif);
        background-position: center;
        background-attachment: fixed;
        background-repeat: no-repeat;
          top: 0;
          left: 0;
          right: 0;
          bottom: 0;
          pointer-events: auto;
    }
8

Fixed properly in 7.5.1

https://dev.vaadin.com/ticket/14873

9

Hey there

I’m trying to use a “modal” loading indicator and I’m having the same issue with the blinking curtain.

Could you take a look at my source code and say me what’s wrong with it? I tried Jounis solution, but it’s not working.
I’m using Vaadin v.7.5.

.v-window-modalitycurtain {
        @include animation(valo-animate-in-fade 400ms 100ms backwards);
    }
  .v-loading-indicator[style*="none"]
:before {
     display: none;
   }
   
   .v-loading-indicator-delay:before, .v-loading-indicator-wait:before {
    content: "";
    position: fixed;
    background-color: rgba(0,0,0,.5);
    background-image: url(images/loading.gif);
    background-position: center;
    background-attachment: fixed;
    background-repeat: no-repeat;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: auto;
   }

Thanks for helping!