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

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

7 Answers 493 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Nariman
Top achievements
Rank 1
Nariman asked on 01 Dec 2013, 07:04 AM
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.    

7 Answers, 1 is accepted

Sort by
0
Alexander Valchev
Telerik team
answered on 03 Dec 2013, 02:12 PM
Hi Nariman,

This is not a known issue and we were not able to reproduce it with any of the Grid demos.
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Nariman
Top achievements
Rank 1
answered on 03 Dec 2013, 03:57 PM
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.
0
Alexander Valchev
Telerik team
answered on 05 Dec 2013, 12:57 PM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Nariman
Top achievements
Rank 1
answered on 10 Dec 2013, 08:26 AM
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.
0
Alexander Valchev
Telerik team
answered on 12 Dec 2013, 08:27 AM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Lorenzo
Top achievements
Rank 1
answered on 21 Jan 2014, 11:11 PM
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

0
Dimo
Telerik team
answered on 23 Jan 2014, 04:44 PM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Tags
Grid
Asked by
Nariman
Top achievements
Rank 1
Answers by
Alexander Valchev
Telerik team
Nariman
Top achievements
Rank 1
Lorenzo
Top achievements
Rank 1
Dimo
Telerik team
Share this question
or