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.
Syncfusion Feedback

FOUC (Flash of Unstyled Content)

Thread ID:

Created:

Updated:

Platform:

Replies:

129723 Mar 30,2017 12:49 PM UTC Apr 4,2017 05:34 AM UTC ASP.NET Web Forms 5
loading
Tags: Menu
Danie van Eeden
Asked On March 30, 2017 12:49 PM UTC

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>

Saravanan Arunachalam [Syncfusion]
Replied On 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.

Danie van Eeden
Replied On 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.

Prince Oliver [Syncfusion]
Replied On 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 


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

Awesome. Thanks.
Will do.

Danie

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

Hi Danie, 
  
Most Welcome. 
  
Regards, 
Preethi 


CONFIRMATION

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.

Warning Icon 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.Close Icon

;