Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium


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

Posted on 2014-04-28
Medium Priority
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
  • 2
LVL 28

Assisted Solution

by:Ryan McCauley
Ryan McCauley earned 1000 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

Free Tool: Path Explorer

An intuitive utility to help find the CSS path to UI elements on a webpage. These paths are used frequently in a variety of front-end development and QA automation tasks.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

Question has a verified solution.

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

If I have to fix slow responding website my first thoughts are server side optimizations: the database may not be optimized or caching is not enabled, or things like that. We often overlook another major part of our web application: the client. We o…
While opting for any web-to-print solution, you need to discuss with your team and some of your end users and know their opinions about your decisions. In this article we list down some questions you need to ask yourself.
Wufoo.com provides powerful tools for surveying targeted groups, and utilizing data from completed surveys to find trends, discover areas of demand or customer expectation, and make business decisions on products or services.
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.

564 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