We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy.
Unfortunately, activation email could not send to your email. Please try again.

FOUC (Flash of Unstyled Content)

Thread ID:





129723 Mar 30,2017 08:49 AM Apr 4,2017 01:34 AM ASP.NET Web Forms 5
Tags: Menu
Danie van Eeden
Asked On March 30, 2017 08:49 AM


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">
    <style type="text/css">
      .no-fouc {display: none;}
    <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> 
        $(document).ready(function () { $('.no-fouc').removeClass('no-fouc') });
    <script type="text/javascript">
        document.documentElement.className = 'no-fouc';              
    <asp:ContentPlaceHolder ID="head" runat="server">
    <style type="text/css">
        .auto-style1 {
            width: 100%;

Saravanan Arunachalam [Syncfusion]
Replied On March 31, 2017 03:30 AM

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. 
Saravanan A.

Danie van Eeden
Replied On March 31, 2017 09:26 AM

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.

Prince Oliver [Syncfusion]
Replied On April 3, 2017 03:15 AM

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.   

Danie van Eeden
Replied On April 3, 2017 04:13 AM

Awesome. Thanks.
Will do.


Preethi Nesakkan Gnanadurai [Syncfusion]
Replied On April 4, 2017 01:34 AM

Hi Danie, 
Most Welcome. 


This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.