Overlay opacity animation problem: flickering

[Jean-Pascal van der Endt]

Hi,

When I use modal: true in a kendoWindow's configuration, an overlay is displayed. If I'm seeing it correctly, the opacity of that overlay is animated when it is displayed, regardless of whether the overall effects for the window itself have been set.

This is fine, but the direction of the animation could be better, imo. It happens quite quickly, so it's hard to see, but I think the following happens:

1. The opacity attribute for .k-overlay is defined as 0.5 by default (in kendo.common.min.css).
2. When the overlay is displayed, the opacity is briefly set to 1.0, and thus the overlay looks solid black.
3. The opacity is then changed or even animated to the intended value of 0.5.

We are perceiving the temporary opacity of 1.0 as a flickering effect, which doesn't look very nice. It would be better if the opacity animation started at 0.0 and is then changed back to 0.5. Is it possible to achieve this or even fix this permanently? Thanks.

[Alex Gyoshev]

Hello Jean-pascal,

Indeed, this is a bug that has already been fixed in the internal builds. For more information, see this related thread.

Kind regards,
Alex Gyoshev
the Telerik team

[Jean-Pascal van der Endt]

Hi Alex,

Back in July I used the workaround/fix mentioned in the other thread you suggested, and that worked fine; thanks for that. However, today we upgraded to the latest Kendo release, and it seems that the workaround doesn't work anymore.

I thought that leaving the workaround code in-place would actually disable any fixes in the latest release, but it seems it doesn't make any difference now, whether I use the workaround code or not.

Interesting to note is that the problem now only happens once, during the lifetime of a page:

1. Full page load
2. Show kendoWindow --> flicker effect
3. Close kendoWindow, and open again --> no flicker effect
4. Full page load
5. Show kendoWindow --> flicker effect 
etc.

Thanks again for your insight.

[Kamen Bundev]

Hello Jean-Pascal,

If you're seeing this flickering in Chrome, it is due to how the browser handles hardware acceleration of CSS transitions. When you reload the page, hardware acceleration is not yet switched on and when the window transition starts, HW acceleration kicks in and causes flickering while the browser transfers the animated element to the video card to handle it. You can work around it in older versions by setting -webkit-backface-visibility: hidden; or -webkit-transform: translatez(0); on any visible element on the page, this will force Chrome to init hardware acceleration on initial load.

Kind regards,
Kamen Bundev
the Telerik team

[Jean-Pascal van der Endt]

Hi Kamen,

That's very insightful, I did not know that, thanks! However, I feel that I'm dealing with a different issue in this case, since

- I'm seeing this in Chrome, Firefox and IE9

- I didn't have this problem with the previous Kendo release, combined with your fix from the other thread.

- Some further debugging revealed the following: when I halt execution at the beginning of the kendo.fx.fade.css.opacity function (the one you suggested in the other thread), so before the function returns the intended opacity value, I can see that the overlay element is briefly displayed (with opacity: 0.5 and a red debugging color I configured in my stylesheet; less than a second but longer than just a flicker effect) before the opacity animation begins. This only happens the first time; any subsequent calls do not show the overlay element.

The latter points out to me that we're looking at a logical problem, not a switch to hardware acceleration. Dissecting it this way reveals that it's not actually a flicker effect; it really is a styling/timing/display issue.

I hope this makes sense; please let me know if I can do more tests or debugging to figure this one out. Thanks!

Regards,
JP

[Kamen Bundev]

Hi Jean-Pascal,

Are you experiencing the flicker using the service pack without the mentioned in the other thread workaround (the overlay animation should be fixed there) or just in Q2 2012 build 710 + the workaround?

Regards,
Kamen Bundev
the Telerik team

[Jean-Pascal van der Endt]

Hi Kamen,

At the moment I'm seeing this in 2012.2.913 (which I believe is Q2 2012 SP1, right?) with and without the workaround. 

Hope this helps,

JP

[Kamen Bundev]

Hello Jean-Pascal,

Sorry for the late pick-up, but I was out of the country. I'm still not able to reproduce this issue - even if I add the workaround and halt the execution, the overlay is not shown here. Can you send me a sample page which reproduces the issue with the service pack, so that I can take a look? Thank you in advance.

All the best,
Kamen Bundev
the Telerik team