Web UI Grid Display problem in iPad Safari (iOS 7+)

[Nariman]

Hi,
We notice that when the data source return valid data to the Grid (in Web UI) that is browsed in the iPad Safari (iOS7+), the Grid does not show any rows until user touch (click on ) the Grid. Only upon touching (clicking) the Grid then it immediately shows its rows!
This behavior is only happening in the iOS Safari and not in any other browser.
Would appreciate your investigation and solution on this problem.
Thank you.    

[Alexander Valchev]

Hi Nariman,

This is not a known issue and we were not able to reproduce it with any of the Grid demos.

• http://demos.kendoui.com/web/grid/index.html
  
  

Is it possible for you to isolate the behavior in a sample jsBin page? In this way we will be able to examine your exact scenario in details and assist you further. Please provide such sample and we will check it right away.
Thank you in advance for the cooperation.

Regards,
Alexander Valchev
Telerik

[Nariman]

Hello Alexander,

Actually you can reproduce it with the same link you send to me.
1. please use iPad iOS7+ safari and go to http://demos.kendoui.com/web/grid/index.html
2. Choose Binding to Remote Data, or Binding to everlive. 
3. reload your page in Safari by clicking the refresh icon (the rounded arrow beside the URL of safari)
4. You can then see the grid does not show any rows but pages are there at footer and if you choose page 2 (or simply double touch/double click on the grid row area then the screen become zoomed) then you see the data.
5. In such scenarios, Looks like some event has to be triggered like select row or resize etc for the grid to show its rows
the above is the closest scenario I could reproduce with your demo URL. 
Thank you and looking forward to receive your advise on how to fix it. 

Thank you.

[Alexander Valchev]

Hi Nariman,

Thank you for the follow up.

We were able to reproduce and investigate the issue. The problem comes from a styles which we added in order to support integration with CSS frameworks like Bootstrap.

.k-animation-container,
.k-widget, .k-widget *,
.k-animation-container *,
.k-widget *:before,
.k-animation-container *:after {
  -webkit-box-sizing: content-box;
  -moz-box-sizing: content-box;
  box-sizing: content-box;
}

Removing the following style should fix the issue.

Since the problem occurs due to a rendering problem in the browser, you can resolve it also by forcing the browser to re-render the table rows (they do exist in the DOM tree).
This can be done in the following way:

$("#grid").data("kendoGrid").one("dataBound", function(e){
    var that = this;
    that.tbody[0].style.zoom = 1.1;
    setTimeout(function(){
        that.tbody[0].style.zoom = 1;
    });
});

The code should be executed just the first time grid loads which is why the .one method is used.
I hope the information will help.

Regards,
Alexander Valchev
Telerik

[Nariman]

Hello Alexander,
Thank you for your solution, we will use your recommended work-around to fix the problem.
However, are you going to fix this issue in your future internal release, soon?
Thank you.

[Alexander Valchev]

Hi Nariman,

The issue is caused by a rendering bug in iOS browser which occurs only when a given combination of CSS rules is applied. We cannot include the JavaScript workaround because it will cause unnecessary application overload for users that does not experience the same problem. We also cannot remove the aforementioned styles because they are used for integration with CSS frameworks like Bootstrap.
Due to this reasons currently we cannot provide a build-in fix, please use the suggested workaround.

Regards,
Alexander Valchev
Telerik

[Lorenzo]

Hi Alexander Valchev,
the workaround works fine for me, but what if I already have a function bound to the dataBound event and need that function to be executed every time ?

Thanks 

Lorenzo

[Dimo]

Hi Lorenzo,

You can bind multiple handlers to the same event, if you prefer to do it that way.

http://docs.kendoui.com/getting-started/widgets#example---subscribe-to-an-event-using-the-bind-method

An alternative approach is to modify the existing handler.

Regards,
Dimo
Telerik