RadWindow broken UI

[Ruben Markosyan]

I am using RadWindow for session expiration pop-up notification. It called when there is no activity on web page for some period.
Sometimes it is displayed partially (missing borders, title bar). 
It seems that that the issue mostly occurred when browser window is on background or minimized. 
On the attached picture you can see normal appearance of the popup, and with broken UI  

Could you please help me?
 
Here is client-side to activate “session expired” pop-up.

function SessionExpired() {

var oManager = GetRadWindowManager();
oManager.closeAll();
var requestString = "<%= ResolveClientUrl("~/SessionExpired.aspx") %>";
var oWnd = window.radopen(requestString, "SessionExpired");
oWnd.set_modal(true);
oWnd.setSize(513, 230);
oWnd.center();
oWnd.add_close(OnClientCloseSession);

}

[Marin Bratanov]

Hello Ruben,

This code itself should not be the cause for the problem. A more likely reason for it is that some requests (for your stylesheets and images, as I see you are using a custom skin) are not returned by the server properly. This article treats similar problems in greater detail: http://www.telerik.com/help/aspnet-ajax/window-troubleshooting-missing-borders-titlebar-and-commands.html.
Possible reasons for this are:
- the IE stylesheet limit has been reached on the page
- requests are not properly returned by the server

What you can try - register the stylesheets and images for this popup on the page as static files instead of using resources and monitor the network traffic to see if this is the reason for the problem.

It is also possible that since the session has timed out access is denied to certain resources and you should mark them as accessible (see this article for a location tag example): http://www.telerik.com/help/aspnet-ajax/introduction-troubleshooting.html.


Greetings,
Marin Bratanov
the Telerik team

[Ruben Markosyan]

Hello Marin,

Thank  you for the answer. 

Want to share solution that I’ve found for the issue.
During investigation I noticed that css file (Window.ThemeName.css) loaded correctly, but skin images are not loaded. And this happens from time to time for all browsers (IE, Chrome, FF). 
So I have replaced image links with inline base64 encoded strings in the css file and the issue has gone!  
For example:
background-image: url('Window/WindowHorizontalSprites.png');
replaced with
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAeCAIAAACqmwlGAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAACRJREFUeNpiiI6N+080ACpmYiARjGoY1TCqYVTDqAbqawAIMAA4ICw9sfLoYgAAAABJRU5ErkJggg==');

Here is link to the online tool to convert images to encoded strings http://webcodertools.com/imagetobase64converter