This is a migrated thread and some comments may be shown as answers.

Blank screen on certain Android devices with Android 5.x

13 Answers 72 Views

Application

This is a migrated thread and some comments may be shown as answers.

13 Answers, 1 is accepted

answered on 22 Apr 2016, 10:23 AM

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.

answered on 27 Apr 2016, 05:07 PM

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;
            }
        }
    });
}

answered on 24 May 2016, 03:12 PM

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.

answered on 06 Jun 2016, 03:41 PM

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.