Terrible flicker when loading page

9 posts, 0 answers
  1. Nick Raphael
    Nick Raphael avatar
    5 posts
    Member since:
    Jun 2008

    Posted 16 Jul 2012 Link to this post

    Hi,

    I've got a simple mobile website with 3 separate pages.  When each page renders on the iphone, it renders the page without styling and quickly flickers to the correctly rendered view.  So for a grid, I see an ugly bullet list for a split second before it flickers to the nice looking grid.  This happens on all my pages.

    How do I avoid this?

    Kind regards

    Nick
  2. Fasdy
    Fasdy avatar
    1 posts
    Member since:
    Mar 2012

    Posted 18 Jul 2012 Link to this post

    Had the same problem. Any fix?
  3. Alexander Valchev
    Admin
    Alexander Valchev avatar
    2895 posts

    Posted 19 Jul 2012 Link to this post

    Hi guys,

    I was not able to reproduce this behaviour with the official mobile demos. Does the problem persists there?
    The issue might be connected with the way mobile application components are initialized or the amount of data that is being loaded. Actually there is a help article where you will find suggestions how to speed up the view transitions.
    If those guidelines does not help, it would be best to open a support ticket with a runnable test project attached. Thus way we would be able to observe the problem, track down the cause and advice you more accurately.

    Regards,
    Alexander Valchev
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  4. Mat
    Mat avatar
    7 posts
    Member since:
    Jul 2012

    Posted 19 Jul 2012 Link to this post

    One approach we use to solve this is to clear the div or ul before the data is loaded (in our case via a JSON feed)...
    i.e.

    $("#somelistordiv").html("");

    before calling

    $.getJSON("data/test.json", function(result){
    ... code to populate #somelistordiv
    }
  5. Nick Raphael
    Nick Raphael avatar
    5 posts
    Member since:
    Jun 2008

    Posted 19 Jul 2012 Link to this post

    Yes, it happens on the official demos.  I've attached screenshots - during loading and after loading.
  6. Andrew
    Andrew avatar
    23 posts
    Member since:
    Oct 2008

    Posted 20 Jul 2012 Link to this post


    It also happens to me with official demos.

    It happens when you first navigate to the index page or if you refresh the index page. This doesn't look good.

    I hope someone from Telerik will answer with a solution.

    We are currently evaluating different mobile frameworks.

    Also, the navigation between pages, from example back to the index page is very slow.

    Telerik and other companies are advertising that they have a mobile framework but the reality is it doesn't really work.
  7. Alexander Valchev
    Admin
    Alexander Valchev avatar
    2895 posts

    Posted 20 Jul 2012 Link to this post

    Hello guys,

    It seems that I mislead you, please accept my apologies for that.
    Indeed such behaviour (Flash of unstyled content) occurs when the external resources are not loaded fast enough.

    To prevent the FOUC you can hide the content initially (with visibility: hidden, but not with display: none) and then show it when everything loads/inits (like in a data-init event). In this forum post you will find more information on the subject as well as a code snippet demonstrating how this could be done.

    Regards,
    Alexander Valchev
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  8. Andrew
    Andrew avatar
    23 posts
    Member since:
    Oct 2008

    Posted 20 Jul 2012 Link to this post

    Alexander, but why that fix is not part of the demo itself?
  9. Alexander Valchev
    Admin
    Alexander Valchev avatar
    2895 posts

    Posted 23 Jul 2012 Link to this post

    Hello Andrew,

    Thank you for the suggestion. We will consider using this approach in the official demos as well.

    Regards,
    Alexander Valchev
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Back to Top