How to fix the FOUCing menu?

7 posts, 0 answers
  1. Dathan
    Dathan avatar
    4 posts
    Member since:
    Nov 2007

    Posted 12 Apr 2012 Link to this post

    The menu has a flash of unstyled content (FOUC) before it renders, how do I fix that? Ideally, I'd have the menu fade-in after the render is complete.

    Thanks.
  2. Dathan
    Dathan avatar
    4 posts
    Member since:
    Nov 2007

    Posted 12 Apr 2012 Link to this post

    Here's my solution (which is no solution but works):

    HTML:
    --------------------------------------------
    <html lang="en" class="no-js">
    <head>
        <script>(function (H) { H.className = H.className.replace(/\bno-js\b/, 'js') })(document.documentElement)</script>
    --------------------------------------------

    CSS:
    --------------------------------------------
            #menu {
                display: none;
            }
            .no-js #menu {
                display: block;
            }
    --------------------------------------------

    JavaScript:
    --------------------------------------------
    <script>
        $(document).ready(function () {
            $("#menu").kendoMenu();
            $("#menu").fadeIn();
        });
    </script>
    --------------------------------------------

    Ideally, the kendoMenu() would have a callback.
  3. Mike
    Mike avatar
    27 posts
    Member since:
    Oct 2007

    Posted 15 Apr 2012 Link to this post

    Dathan,

    Same issue here but only on Ipad and Iphone.
  4. Dimo
    Admin
    Dimo avatar
    8482 posts

    Posted 16 Apr 2012 Link to this post

    Hello all,

    Flashing of unstyled content is theoretically possible, if the page is too heavy or if there is something that slows down the browser before the Menu is initialized. This may include large script files registered in the <body> (instead of the <head>) or too many widgets being initialized before the Menu. If this is the case, some simple optimizations and refactoring of the front-end code should resolve the problem. Otherwise, the solution is to hide the raw HTML and show it back, as already demonstrated.

    Greetings,
    Dimo
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  5. Mike
    Mike avatar
    27 posts
    Member since:
    Oct 2007

    Posted 16 Apr 2012 Link to this post

    Hi Dimo,

    I'm guessing this is why I'm getting FOUC:

    @Html.ScriptCDN("https://da7xgjtj801h2.cloudfront.net/2012.1.322/js/kendo.core.min.js")

    @Html.ScriptCDN("https://da7xgjtj801h2.cloudfront.net/2012.1.322/js/kendo.fx.min.js")

    @Html.ScriptCDN("https://da7xgjtj801h2.cloudfront.net/2012.1.322/js/kendo.popup.min.js")

    @Html.ScriptCDN("https://da7xgjtj801h2.cloudfront.net/2012.1.322/js/kendo.menu.min.js")

    Is there a way to combine these scripts and still use CDN?  Would it make more sense to combine these scripts and serve them locally?

  6. Dimo
    Admin
    Dimo avatar
    8482 posts

    Posted 18 Apr 2012 Link to this post

    Hello Mike,

    Loading, parsing and executing of scripts blocks the browser's thread. This means that if your scripts are registered in the page <body> the browser has already rendered some content and it will be visible while the scripts are handled. However, if the scripts are registered in the <head>, you should not experience any FOUC. No matter whether your scripts are served from the CDN or locally, this is the correct approach.

    Otherwise, you can use kendo.all.min.js or kendo.web.min.js from the CDN, which are combined script files. The first one includes also DataViz and Mobile scripts, which you may not need.

    Surely you can experiment with serving the scripts locally, but I don't think this is necessary or the best option.

    Regards,
    Dimo
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  7. LyphTEC
    LyphTEC avatar
    3 posts
    Member since:
    Mar 2005

    Posted 09 May 2012 Link to this post

    Yeah, I encountered a similar issue on one of my sites.

    I just moved the jQuery & kendo script tags from the bottom of the page to the <head> section and it seems to have fixed the problem.
Back to Top