Rearrange on PageLoad with IPad (Safari?)

8 posts, 0 answers
  1. Stefan
    Stefan avatar
    2 posts
    Member since:
    Dec 2011

    Posted 21 May 2012 Link to this post

    Congratulations to your Products.

    When I start your demos or my test-projects there is a short rearranging of the page on Ipad. 
    At the first moment, I can see the plain html output of the page and then some milliseconds later the kendouimobile-design.

    There is no such ugly behavior on other browsers I tested (Android stock browser, IE and Chrome on PC)

    Is there a solution against this behavior?

    Thank you

  2. Kamen Bundev
    Kamen Bundev avatar
    1532 posts

    Posted 21 May 2012 Link to this post

    Hello Stefan,

    To avoid the FOUC (Flash Of Unstyled Content) you can set visibility: hidden on the first view and remove it after you initialize the application. Something like this:
        <div data-role="view" data-title="Kendo Mobile App" id="firstView">
                $("#firstView").css("visibility", "hidden");
            var mobileApplication = new$(document.body));
            $("#firstView").css("visibility", "visible");

    Another way is the use of a splash or loading screen in a similar manner.

    All the best,
    Kamen Bundev
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  3. Stefan
    Stefan avatar
    2 posts
    Member since:
    Dec 2011

    Posted 21 May 2012 Link to this post

    Hey Kamen

    Thank you for your quick answer!

    FOUC - great name! Now I know how to google for this behavior...

    unfortunately the problem is still there - A "MainElement".show() right after the Application.init is still to early... only a ugly

    function KUIMStart()
        window.kendoMobileApplication = new$(document.body));
        setTimeout("KUIMStart2();", 200);
    function KUIMStart2()
        $("#MainContent").css("visibility", "visible");

    works... this is ok for the first step in our project.

    I will later check the points in too.

    Thank you.
  4. Joon
    Joon avatar
    30 posts
    Member since:
    Aug 2012

    Posted 20 Jun 2012 Link to this post

    Here's how I solved the issue, hope it helps you.

    Right after the body, I've inserted the hidden thing,,
            //initially hiding the body so that the ugly body before the css rendering doesn't show up for users
            //body visibility set back to 'visible' on the data-show method of the first view, home.
            $(document.body).css("visibility", "hidden");

    and then in the data-show method of the initial view, I set it back to visible. something like this,,
    <div data-role="view" id="home" data-title="Home" data-show="home_onShow" data-layout="mainLayout">
            function home_onShow(args) {
                //setting the hidden(above, just after the body tag) css visibility back to visible
                $(document.body).css("visibility", "visible");
  5. Duredhel
    Duredhel avatar
    1 posts
    Member since:
    Aug 2012

    Posted 21 Aug 2012 Link to this post

    Conratz to your product as well.

    Kamen you said that you can fix this with the use of a splash screen. How can you do that? So you can have a screen which it will be displayed for 1-2 seconds during the load?

    I tried this guide:  but I can't make it work.
  6. N Mackay
    N Mackay avatar
    228 posts
    Member since:
    Dec 2010

    Posted 25 Oct 2012 Link to this post

    Joon's suggestion worked a treat for me.

    Nice and slick now on Android 2.3.5 & 4 and iOS.

    Glad I chose Kendo, Now the 1st app in is UAT it's been seen by management and project backers who are very happy with the feature and especially in iOS think it's just a native app.

    Keep up the good work, Kendo has great potential.

  7. Troy
    Troy avatar
    1 posts
    Member since:
    Nov 2012

    Posted 16 Dec 2012 Link to this post

    I'm using kendo for mobile, and do all scripting after the contents of my body. I was still seeing flashes of un-rendered content from various views on my page. I ended up using CSS and applying the following rule within my <head></head>:

    visibility: hidden;

    Since Kendo automatically injects a <div data-role="content"> wrapper around the entire contents of each view, I figured I would just go ahead and manually add this wrapper directly after each <div data-role="view"> on my page. Now the contents of all my views are hidden. I then add a function on my initial view's data-init that does the following:

    function initMyView(e) {
    $('[data-role="content"]').css('visibility', 'visibile');

    This now makes the contents WITHIN every view visible, but, of course, will not actually be displayed until its respective view is being shown. Further, I was then able to add a preloader, using CSS, at the beginning of the body and outside of the views (so it would stay visible), where I just removed it in the same function as shown above.

    Hope this helps,
  8. Keen
    Keen avatar
    101 posts
    Member since:
    Mar 2013

    Posted 04 Apr 2013 Link to this post

    Can I have code for this guys?
    Im currently working a sample project. with a image in loading a fade after 2-3 seconds
    Using Icenium with Kendo Ui mobile
Back to Top