In our project, we do not use classes or attributes in our <body> tag.
We see that kendoui adds data-role="pane" to it.
When running the app on certain devices, unclear what they have in common, the output can become a white screen in 2 cases of 3.
When tapping on the screen, the app reveals itself.
In such a deadlock occasion, we sent a string with the entire DOM to the server, having a timer in the app that could make that possible.
We used $('html').html().
The resulting webpage was then cleared from script tags and viewed in a computer web browser to see what the phone actually tried to render.
(We put the resulting html file in a directory were the styles are).
Most of the output was gray, except the title bar that showed up clipped. It seems like a style tag has been added that sais:
A funny thing was that when we used firebug to disable the rule position: relative from .km-pane the page showed the missing content.
The webpage also shows when we remove the class km-pane from body.
When looking on examples, it seems like km-pane is used mosly for divs, not body tags.
How do they apply to body? How does position: relative make sense for body?
Is it possible to supress the addition of the km-pane class to body?
We see that kendoui adds data-role="pane" to it.
When running the app on certain devices, unclear what they have in common, the output can become a white screen in 2 cases of 3.
When tapping on the screen, the app reveals itself.
In such a deadlock occasion, we sent a string with the entire DOM to the server, having a timer in the app that could make that possible.
We used $('html').html().
The resulting webpage was then cleared from script tags and viewed in a computer web browser to see what the phone actually tried to render.
(We put the resulting html file in a directory were the styles are).
Most of the output was gray, except the title bar that showed up clipped. It seems like a style tag has been added that sais:
style> .km-view { clip: rect(0 1000px 1000px 0); }</style>A funny thing was that when we used firebug to disable the rule position: relative from .km-pane the page showed the missing content.
The webpage also shows when we remove the class km-pane from body.
When looking on examples, it seems like km-pane is used mosly for divs, not body tags.
How do they apply to body? How does position: relative make sense for body?
Is it possible to supress the addition of the km-pane class to body?
1 Answer, 1 is accepted
0
Hello,
The .km-pane class is added to the body to apply a few important styles to the root pane of the application. The root pane holds all the Views in the app and is relative, so that the absolutely positioned Views can be animated inside of it. The clip you've seen is applied automatically for performance reasons and its size is taken from the biggest dimension of the viewport, so it can be hiding the content on the device itself (especially until clicking). It is normal to see the app clipped if you take the HTML only from it and run it on desktop, as the viewport is much bigger.
Can you list me all the device models that exhibit this behavior and possibly send over the application or a sample page that reproduces the issue, so that I can try and reproduce it myself and help you fix it? I can convert this thread to a ticket if you need the privacy. Thank you in advance.
Regards,
Kamen Bundev
Telerik
The .km-pane class is added to the body to apply a few important styles to the root pane of the application. The root pane holds all the Views in the app and is relative, so that the absolutely positioned Views can be animated inside of it. The clip you've seen is applied automatically for performance reasons and its size is taken from the biggest dimension of the viewport, so it can be hiding the content on the device itself (especially until clicking). It is normal to see the app clipped if you take the HTML only from it and run it on desktop, as the viewport is much bigger.
Can you list me all the device models that exhibit this behavior and possibly send over the application or a sample page that reproduces the issue, so that I can try and reproduce it myself and help you fix it? I can convert this thread to a ticket if you need the privacy. Thank you in advance.
Regards,
Kamen Bundev
Telerik
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!