Rendering Order of content vs. master in Master Page arrangement causes flash

Posted on 2014-04-28
Last Modified: 2014-05-14

I have a nested MasterPage arrangement.  On the top master page I have a menu across the top and a panel control down the right. On the inner master page, I have a menu across the top and then a panel which occupies most of the left bottom portion of the screen.  When the page renders, the panel on the right hand side of the top master first appears on the left hand side of the screen in a flash. Then, when the nested master page appears with its content, the panel moves into its correct position along the right side of the screen.  I want to get rid of the right panel's initial flash appearance on the left. The panel has a couple of grid controls in it with data.  The main content on the left is also displaying data.  The panels are float left and float right to allow them to be side by side and have a 75%/25% sizing.

I have tried using visibility or display attributes to delay the right panel's appearance via both script and server side.  But as I tried this and stepped through execution,  I realized that all of the code completes execution prior to the rendering and it appears to be something on the client that decides to show the master first and then the content.

I was thinking about changing the right hand panel to also be a content page.  However, a lot of code would have to be rewritten and I am wondering if it would be worth it because even then, there is no guarantee that I could force the left content to render before the right.

The grids in the right panel are in an updatepanel as well.  And, the menus are in update panels as well as the main content block.

I would just like to get some ideas on why the client isn't waiting until all of the content is ready and just display the controls where they belong in one shot and how I can affect the order of display to avoid the flash. Thanks!
Question by:azTop
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 2
LVL 28

Assisted Solution

by:Ryan McCauley
Ryan McCauley earned 250 total points
ID: 40035881
The browser will render content as it receives it from the server, so you're correct in thinking that the render delay and flash you're seeing are something that's happening on the client. You may be able to set the layout a bit more precisely rather than using float to get it to appear in approximately the right spot when it's initially rendered, but the browser will still update things as all of the content is received.

The most direct way to address this is to adjust the amount of content you're sending to your browser - is there a way to shrink the page size? Is there a significant amount of white space when you do a "View Source" on the rendered page? Are there unnecessary elements you can remove or can move to an asynchronous panel that's refreshed after the initial load? If some content is being sent, and then IIS is waiting for an event before sending the rest, that delay could cause rendering issues. At very minimum, does your web server have content compression enabled?

There are some suggestions for troubleshooting this (or at least getting some more precise details on which portion of your page is causing the delays) at this Stackoverflow question:

Accepted Solution

azTop earned 0 total points
ID: 40054476
Thanks for your help. You have given me additional opportunities for improvement, which is appreciated.

In the end, I went back to iterate over the possible combinations of float, etc. and came up with a winner.

HorizontalAlign="Left" ( attribute ) and float:left; for the left panel. And, just HorizontalAlign="Right"  for the right panel.

Author Closing Comment

ID: 40064020
As stated above, the specific combination of attributes and float caused the panel to initially appear in its correct position.

Featured Post

Don't Cry: How Liquid Web is Ensuring Security

WannaCry is just the start. Read how Liquid Web is protecting itself and its customers against new threats.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

A Change in PHP Behavior with Session Write Short Circuit ( (Winter 2014)** With the release of PHP 5.6 the session handler changed in a way that many think should be considered a bug.  See the note …
New Relic: Our company recently started researching several products to figure out what were the best ways for us to increase our web page speed and to quickly identify performance problems that we may be having. One of the products we evaluated wa…
This video teaches viewers how to create their own website using cPanel and Wordpress. Tutorial walks users through how to set up their own domain name from tools like Domain Registrar, Hosting Account, and Wordpress. More specifically, the order in…
Learn how to set-up custom confirmation messages to users who complete your Wufoo form. Include inputs from fields in your form, webpage redirects, and more with Wufoo’s confirmation options.

688 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question