1. Home
  2. Forum
  3. ASP.NET Web Forms
  4. FOUC (Flash of Unstyled Content)

FOUC (Flash of Unstyled Content)

Hi,

whilst the Grid is loading I get FOUC (Flash of Unstyled Content on the Menu component.

My only solution for this was the following in the HTML code: see green

<head runat="server">
    <title></title>  
    <style type="text/css">
      .no-fouc {display: none;}
    </style>
    <link rel='nofollow' href="Content/ej/ej.widgets.core.min.css" rel="stylesheet" />
    <link rel='nofollow' href="Content/ej/default-theme/ej.theme.min.css" rel="stylesheet" />  
   
    <script type="text/javascript" src="Scripts/jquery-3.1.1.min.js"></script>
    <script type="text/javascript" src="Scripts/jsrender.min.js"></script>
    <script type="text/javascript" src="Scripts/ej.web.all.min.js"></script>        
    <script type="text/javascript" src="Scripts/ej.webform.min.js"></script> 
     <script>
        $(document).ready(function () { $('.no-fouc').removeClass('no-fouc') });
    </script>
    <script type="text/javascript">
        document.documentElement.className = 'no-fouc';              
    </script>     
   
               
    <asp:ContentPlaceHolder ID="head" runat="server">
    </asp:ContentPlaceHolder>
    <style type="text/css">
        .auto-style1 {
            width: 100%;
        }
    </style>     
</head>

5 Replies
SA Saravanan Arunachalam Syncfusion Team March 31, 2017 07:30 AM UTC

Hi Danie, 
Thanks for contacting Syncfusion support. 
Could you please provide the following details? 
1.       Which thinks you want to hide before the document ready? 
2.       What do you have expect when loading the Grid? 
3.       Provide clear details of your requirement. 
4.       Share the screenshot of expected output. 
Regards, 
Saravanan A.

DV Danie van Eeden March 31, 2017 01:26 PM UTC

Hi, thanks for the reply.

Herewith answers as requested:

1.       Which thinks you want to hide before the document ready? 
In my scenario I had a grid component and menu component (horizontal) on the aspx page.
I had connected the grid to a datasource / direct SQL.
When the page starts up, the menu component "flashes" without any CSS styles applied (for a brief moment) and then displays correctly (with CSS styles applied). This happens on the postback. This is known as FOUC (Flash of Unstyled Content) and usually occurs when JavaScript is executing. I do not "want" to hide anything, but was forced to do so to solve the problem. I had not expected this behaviour.
2.       What do you have expect when loading the Grid? 
     I want the ASP Menu (Syncfusion Menu) to retain it's style whilst loading occurs.
3.       Provide clear details of your requirement. 
     Am I doing something wrong through the use of the Grid and Menu? Is this behaviour other experience as well and that you are aware of? Is there something I can do interms of component properties that would prevent this? Or perhaps another solution compared to my own solution (as per my example in previous post)?
4.       Share the screenshot of expected output. 
As per explanation - if screenshot still required I will regenerate problem by removing my fixes.

PO Prince Oliver Syncfusion Team April 3, 2017 07:15 AM UTC

Hi Danie,   
  
Thank you for your reply.   
  
In our ASP control, the wrapper is converted to script and the script is then rendered during the page load. So, during page load our menu control renders while the script execution, which appears to be flashing. This is the known behavior in our control. You can use your solution of hiding the element during rendering and displaying after load complete.   
  
Regards,   
Prince 


DV Danie van Eeden April 3, 2017 08:13 AM UTC

Awesome. Thanks.
Will do.

Danie

PN Preethi Nesakkan Gnanadurai Syncfusion Team April 4, 2017 05:34 AM UTC

Hi Danie, 
  
Most Welcome. 
  
Regards, 
Preethi 


Loader.
Up arrow icon