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 55 Views
Application
This is a migrated thread and some comments may be shown as answers.
Ron
Top achievements
Rank 1
Veteran
Ron asked on 19 Apr 2016, 05:34 PM

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.

13 Answers, 1 is accepted

Sort by
0
Anton Dobrev
Telerik team
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.

 
0
Ron
Top achievements
Rank 1
Veteran
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;
            }
        }        
    });        
}
0
Petyo
Telerik team
answered on 02 May 2016, 07:30 AM
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!
 
0
Ron
Top achievements
Rank 1
Veteran
answered on 11 May 2016, 02:45 PM

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.

0
Petyo
Telerik team
answered on 16 May 2016, 07:07 AM
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!
 
0
Ron
Top achievements
Rank 1
Veteran
answered on 16 May 2016, 02:58 PM

Thanks,


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


Any other idea?

 

Ron.

0
Petyo
Telerik team
answered on 19 May 2016, 05:56 AM
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!
 
0
Ron
Top achievements
Rank 1
Veteran
answered on 20 May 2016, 03:12 PM

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.

0
Ron
Top achievements
Rank 1
Veteran
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.

0
Petyo
Telerik team
answered on 25 May 2016, 07:47 AM
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!
 
0
Ron
Top achievements
Rank 1
Veteran
answered on 25 May 2016, 02:41 PM

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.

0
Petyo
Telerik team
answered on 30 May 2016, 02:56 PM
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!
 
0
Ron
Top achievements
Rank 1
Veteran
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.
Tags
Application
Asked by
Ron
Top achievements
Rank 1
Veteran
Answers by
Anton Dobrev
Telerik team
Ron
Top achievements
Rank 1
Veteran
Petyo
Telerik team
Share this question
or