Blank screen on certain Android devices with Android 5.x

14 posts, 0 answers
  1. Ron
    Ron avatar
    122 posts
    Member since:
    Sep 2011

    Posted 19 Apr Link to this post

    Hi,

     

    We ran into a problem described on the following thread:

     

    http://www.telerik.com/forums/blank-screen-on-certain-android-devices-with-android-5-x?actionMode=replyThread

     

    In a nutshell, certain users, on Android 5.x complain of empty screen when trying to scroll the app.

     

    The suggestion was to try to use CrossTalk - but it did not solve our issue. Given that it did not work, we were referred to this forum for potential help - I am wondering if anyone here knows how to overcome this issue.

     

    Thanks,

    Ron.

  2. Anton Dobrev
    Admin
    Anton Dobrev avatar
    539 posts

    Posted 22 Apr Link to this post

    Hi Ron,

    This symptom appears not to be related to a known issue in Cordova apps utilizing Kendo UI. One other idea that comes to mind is to upgrade to Cordova 4.0 your project in case it is using a lower version.

    One related behavior I have experienced in the past was in regard to the usage of code that interferes with the scrolling behavior of the list view, either using another scroller, resetting or controlling the scroller programmatically, etc.

    That is why I'd suggest that you try the following as a way to troubleshoot/identify the issue:

    - Remove any custom-added scrolling logic from the list view or any event handlers in the app
    - Enable the native scrolling of the Kendo ListView widget
    - Enable the Android Hardware Acceleration in the Cordova project
    - Strip the ListView to its minimum runnable configuration and run it on the device to examine what exactly may be causing the problem

    I hope that this helps.

    Regards,
    Anton Dobrev
    Telerik
     

    Visit the Telerik Verified Plugins Marketplace and get the custom Cordova plugin you need, already tweaked to work seamlessly with AppBuilder.

     
  3. Kendo UI is VS 2017 Ready
  4. Ron
    Ron avatar
    122 posts
    Member since:
    Sep 2011

    Posted 27 Apr Link to this post

    Thanks Anton!
    We use Cordova 6.0.0 with Android platform 5.1.1
    We also added the Crosswalk plugin following Petyo suggestion

    With your suggestions we managed to find the code that if commented, we do not experience this problem on Android 5.X devices.
    Our application presents a listview that is sometimes long and presents hourly events. The purpose of the following code is to scroll this list to the right place in the listview according to the current time.
    As mentioned before this code works well on iOS and Android devices except for Android 5.X devices.

    Any idea how we can change the following code so it will also work with Android 5.X?

    ----------
    function scrollToRelevantTime()
    {   
        //make sure scrolling is required at all. For example on ipads we might see all the events on the screen and in 
        //such case running this scroll will cause the events list to stuck (until a double click of the user)
        var headerHeight = parseFloat($("#index-view header").css("height"));
        var listHeight = parseFloat($("#events-list").css("height"));
        if(deviceHeight - headerHeight - listHeight >= 0)
        {
            return;
        }
            
        var hours = (new Date()).getHours();
        if(hours < 4)
        {
            return;
        }
        
        var startFromHour = hours -2;//meaning we wish to start from 2 hours before now
        
        var scrolled = false;
        
    //for each element in the listview
        $("#events-list .event-time").each(function(index, element)
        {        
            var isTime = $(element).text().match(/\d{2}:\d{2}/);
            if(scrolled === false && isTime !== undefined && isTime !== null && isTime.length > 0)
            {            
                if(parseInt(isTime[0].substring(0,2)) >= startFromHour)
                {
                    var startFrom = $(element).parent().offset().top;
                    startFrom *= -1;
                    var elementHeight = parseInt($(element).parent().css("height")) + 60;
                    startFrom += elementHeight;
                    //we now make sure scrolling is needed at all - we wish to avoid cases in which we scroll too much and the user sees empty space below the 
                    //listview
                    var sc = app.scroller();
                    if(sc.scrollHeight() + startFrom <= sc.getSize().height)//meaning we might see empty space
                    {
                        //scroll to the bottom
                        startFrom = sc.scrollHeight() - sc.getSize().height;
                        startFrom *= -1;                    
                    }
                    
                    setTimeout(function(){
                        sc.scrollTo(0, startFrom);
                    }, 0);
                   
                    scrolled = true;
                    return;
                }
            }        
        });        
    }
  5. Petyo
    Admin
    Petyo avatar
    2439 posts

    Posted 02 May Link to this post

    Hello,

    From what I see, you rely on the javascript based scroller. You may try using the native one instead - perhaps itw will yield better results. 

    Regards,
    Petyo
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  6. Ron
    Ron avatar
    122 posts
    Member since:
    Sep 2011

    Posted 11 May in reply to Petyo Link to this post

    Petyo,

     

    Thanks for the response. Because the forum was not accessible before - it was hard for us to respond. 

     

    Our entire code-base is in Javascript. I am not sure how we can use the native scroller. Is there a sample that shows how to do it from within our KendoUI listview?

     

    Ron.

  7. Petyo
    Admin
    Petyo avatar
    2439 posts

    Posted 16 May Link to this post

    Hello,

    this is the configuration option I had in mind.

    Regards,
    Petyo
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  8. Ron
    Ron avatar
    122 posts
    Member since:
    Sep 2011

    Posted 16 May in reply to Petyo Link to this post

    Thanks,


    We already use the native scrolling option and it still happens.


    Any other idea?

     

    Ron.

  9. Petyo
    Admin
    Petyo avatar
    2439 posts

    Posted 18 May Link to this post

    Hello,

    I am afraid that we don't have anything else in mind. Cordova specific issues are handled by our Telerik Platform offering.

    Regards,
    Petyo
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  10. Ron
    Ron avatar
    122 posts
    Member since:
    Sep 2011

    Posted 20 May in reply to Ron Link to this post

    It seems like the post from the platform forums and the kendoui forums were merged.

     

    I'm not sure if/how we can get answer from the Telerik Platform besides this forum.

    If no solution is found we will have to remain with the existing code, even though we have dozens of Android 5 users who fail to use the app because of this bug with the Listview.

  11. Ron
    Ron avatar
    122 posts
    Member since:
    Sep 2011

    Posted 24 May in reply to Ron Link to this post

    Hi,


    It been almost 2 months since the original post of this problem was published (http://www.telerik.com/forums/blank-screen-on-certain-android-devices-with-android-5-x) and more than a month since this one was published, following Petyo recommendation.


    All this time we see more and more users of Android 5.x uninstalling our app and give negative reviews because of this kendo listview bug. Two questions:

    1) Are we the only one to experience this listview problem with Android 5.x over Cordova?

    2) Is there anything else you suggest us to try? Reminder: none of the following helped
    - Enable native scrolling
    - Using Crosswalk
    - Completely remove any custom-added scrolling logic from our entire app
    - Android Hardware Acceleration

    Thanks,

     

    Ron.

  12. Petyo
    Admin
    Petyo avatar
    2439 posts

    Posted 25 May Link to this post

    Hi,

    We are not aware of other cases that report the problem you face. The suggestions we have provided are generic ones that are known to address similar issues.

    to open a support thread for the Platform product, choose "Telerik Platform" as the product you are submitting the ticket for. Please make sure that you refer this thread in order to avoid duplicate suggestions. 

    Regards,
    Petyo
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  13. Ron
    Ron avatar
    122 posts
    Member since:
    Sep 2011

    Posted 25 May in reply to Petyo Link to this post

    Petyo,

     

    Thanks. We do not have a license for the Platform product - so when I open a ticket, it will not allow me to select it as a product when submiting a ticket.

     

    Is it possible to forward it to someone there?

     

    Thanks,

     

    Ron.

  14. Petyo
    Admin
    Petyo avatar
    2439 posts

    Posted 30 May Link to this post

    Hello,

    Providing commercial support for Cordova specific issues like the one you face is the main point of the Telerik Platform offering. However, we can't provide such without the respective license. 

    Regards,
    Petyo
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  15. Ron
    Ron avatar
    122 posts
    Member since:
    Sep 2011

    Posted 06 Jun in reply to Petyo Link to this post

    Finally we found the cause for the problem. In a nutshell – the bug on Android 5 devices was caused by Kendo rtl. Once we removed <link rel='stylesheet' href='/stylesheets/kendo.rtl.min.css' /> the problem disappeared.

    More details: We are struggling this kendo listview bug on Android for a couple of months, during which users gave a negative review to our app because of this bug. Unfortunately all the suggestions we were given did not solve the bug.


    A little while ago we found the following stack overflow thread: http://stackoverflow.com/questions/30626581/blank-screen-on-android-5
    It gave us clue which led to the solution, by suggesting the problem is RTL related. We are using kendo RTL support from the very beginning of our app (for more than 3 years) and following this clue we removed the kendo rtl stylesheet and, to our surprise, the problem was gone!

    We hope this thread will help any other users experiencing this problem. Here are additional suggestions:

    1) After it turned out kendo RTL was the cause we needed something to replace Kendo's RTL rules and ended with the following simple css rules:
    div[data-role="view"], div[data-role="drawer"]{
        direction: rtl;
    }

    2) Maybe better unit tests for new releases of Kendo that include testing with rtl support is something to consider. Such bugs may have a great influence on one's app, as this example demonstrates


    Thanks to anyone who tried to help us solving this issue and special thanks to Dor Shay whose stack overflow page led us to the solution.

    Thanks

    Ron.
Back to Top
Kendo UI is VS 2017 Ready