Screen Flicker On Response.redirect

Question

I have an issue where the screen goes white for a millisecond on a redirect when rendering the new page.

This causes the screen to flicker and annoys me so.

I have had a little scoot round the web and have found this IE solution which works on IE however it does not on chrome or FireFox.

<meta http-equiv="Page-Enter" content="blendTrans(Duration=0.0)" />
<meta http-equiv="Page-Exit" content="blendTrans(Duration=0.0)" />

Plus I'm sure using this method will have some knock on effects on update panels and Ajax controls.

Is there a way of setting the server to render the full page before giving it the client so not to have this white millisecond that works for all browsers.

Any ideas will be welcomed.

Answer 1

Is there a way of setting the server to render the full page before giving it the client

short answer: no. that's how a web browser works.

even with the fastest possible servers (using statically cached pages as you describe them), you're only decreasing the average "white" time, not eliminating it all together. as you're seeing with IE, that default page transition is part of the browser code, not something the server-side gets control over. if you write your own browser, you can write it to wash black, wash white, or hold the transition until the entire page is loaded, like IE does.

as other people mention, getting your page size down will decrease the "white" time. this time is not only the time the server takes to generate the page, but also all the network travel time for the page, images, javascripts, css, etc. that's why you can never fully get rid of it - only hide it using browser tricks.

and i'm not talking about "client-side" anything. that won't work. the "client-side" code isn't even downloaded, much less running, when the browser decides to white-wash the canvas. it's kind of a standard part of "the internet" that everyone just gets used to; it wasn't designed to be a slide show viewer or a graphically perfect renderer. unfortunately, if you care about transitions that much, HTML is probably not the right medium for your work.

Answer 2

The MSDN examples recommends to set

Response.BufferOutput

before calling

Response.Redirect("http://www.mydomain.com/default.aspx");

You may also want to try to use

Server.Transfer("default.aspx", true);

Answer 3

What you're seeing is a normal occurrence. Here is what happens during a redirect:

• The server sends a response to the browser (redirects are done on the client side).
• The browser loads the response, sees that there is a redirect and stops the page load
• The browser loads the new page

The meta tags you are using are IE only, and will not effect any other browser. The only things that will remove the flicker all together will be one of the following:

1. You said that the redirect occurs when the user clicks on a button or on a grid row or something. If this were to trigger a change to location.href instead of a post-back, then the user would not see the browser flicker.

2. Use Server.Transfer (this will result in the browser's address bar showing the old page instead of the new page (a redirect will change the address bar). This will only work if you are redirecting the user to a page on the same server.

3. Send an HTTP 301 response (Moved Permanently). Tis will remove the flicker, but use this method with caution. It has other effects (it may effect search engine rankings).

To do #3, use this code on the server.

Response.StatusCode = 301;
Response.StatusDescription = "Moved Permanently";
Response.AddHeader("Location", "NewLocation.aspx");

Answer 4

By default the server will buffer the complete response before sending it. The "white" will be a result of the content of the HTML possibly its size. Use a tool such as firebug or IE Developer Tools (my preference is Fiddler) to examine the generated content. At a guess you have some very large ViewState.

Answer 5

Sorry, am late at party! I have been grappling with this on my apps for long. The solution I have devised works for me. Very much like what @Pike65 suggested...

1. Create a holder for an overlay:

<div id="overlayContent" class="overlay">
    <div id="loaderContent" class="loader">
        Loading...
    </div>
</div>

1. CSS for this holder:

.overlay {
    position: fixed;    
    border: 0; margin: 0; padding: 0;
    height: 100%; width: 100%;
    top: 0; left: 0;
    background-color: #272727;
    text-align: center; vertical-align: middle;
    z-index: 900; display: none;
    -moz-opacity: 0.1; opacity: 0.1;
    filter: alpha(opacity=10);
}

.overlay .loader {
    position: relative;
    width:40%;
    margin: 20% auto;
    padding: 10px;
    background-color:black;
    border: solid 1px gray;
    color: #cccccc;
    font-weight: bold;
}

1. Javascript (jQuery):

$('a, input[type=button]').live("click", function (e) { 
    $("#overlay").show().css({ opacity: 0.1 }).fadeTo(UxSpeed, 0.8); 
});

That's it. You may modify the 'js' to your liking. It will cause a translucent overlay to appear whenever any link or button is cliked. By browser's nature, it will wait until it gets a response for the new page (headers). So it won't vanish the current page until at least something is returned for the new page. Once new page starts appearing, it will automatically remove the overlay!

Answer 6

Probably best to do it on the client side. For example, you could have a div that covers the entire page and fades out once the DOM has been fully put together. In jQuery, something like this:

$(document).ready(function() { $('#overlay').fadeOut(); });

From a UX perspective though it might be a little disconcerting. I actually prefer a little bit of flicker so I know things are happening.