This question is locked. New answers and comments are not allowed.
Per Lindsø
Top achievements
Rank 2
Per Lindsø
asked on 04 Jun 2012, 06:32 PM
Hi Kendos,
I'm playing with Kendo and ran in to a problem. When I try to force ios-look on Android mobile with this code
<script>
new kendo.mobile.Application($(document.body), {
platform: "ios"
});
</script>
all the icons in the tabstrip disappear and leave only a blue square. Same with data-icon used in listview. Are there any solution to this problem???
I'm playing with Kendo and ran in to a problem. When I try to force ios-look on Android mobile with this code
<script>
new kendo.mobile.Application($(document.body), {
platform: "ios"
});
</script>
all the icons in the tabstrip disappear and leave only a blue square. Same with data-icon used in listview. Are there any solution to this problem???
12 Answers, 1 is accepted
0
Hello Per,
Android doesn't bode well if you apply 3D transformations on some elements, which we use in iOS for better performance. Try if adding this rule after the mobile CSS helps:
.km-android,
.km-android .km-view,
.km-android .km-header,
.km-android .km-footer,
.km-android .km-list,
.km-android .km-shim .k-animation-container
{
-webkit-transform: none;
}
Regards,
Kamen Bundev
the Telerik team
Android doesn't bode well if you apply 3D transformations on some elements, which we use in iOS for better performance. Try if adding this rule after the mobile CSS helps:
.km-android,
.km-android .km-view,
.km-android .km-header,
.km-android .km-footer,
.km-android .km-list,
.km-android .km-shim .k-animation-container
{
-webkit-transform: none;
}
Regards,
Kamen Bundev
the Telerik team
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Per Lindsø
Top achievements
Rank 2
answered on 05 Jun 2012, 04:37 PM
I'm afraid it does not help.
I think the problem also appears in some cases without forcing ios-platform. To reproduce this: run the sample code from the code library, http://www.kendoui.com/code-library/mobile/application/using-google-maps-in-kendoui-application.aspx , on Android device. Tabstrip icon will turn to blue square when map is loaded.
Is there anyway to reload the tabstrip as a workaround?
I think the problem also appears in some cases without forcing ios-platform. To reproduce this: run the sample code from the code library, http://www.kendoui.com/code-library/mobile/application/using-google-maps-in-kendoui-application.aspx , on Android device. Tabstrip icon will turn to blue square when map is loaded.
Is there anyway to reload the tabstrip as a workaround?
0
Hi Per,
Can you give more info about the device you're using, since Android browser CSS3 transforms implementation varies by device and video drivers?
All the best,
Kamen Bundev
the Telerik team
Can you give more info about the device you're using, since Android browser CSS3 transforms implementation varies by device and video drivers?
All the best,
Kamen Bundev
the Telerik team
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Per Lindsø
Top achievements
Rank 2
answered on 06 Jun 2012, 10:15 AM
Yes, it is Samsung Galaxy S 3 with Android 4.0.
0
Per Lindsø
Top achievements
Rank 2
answered on 07 Jun 2012, 08:58 PM
Adding transition:"slide" to the applications constructor seems to solve most problems with icons in tabstrip. On the first page icons are still not visible in tabstrip. The application has to slide before they are shown. I wish I knew why... I guess I have to keep on sliding.. ;-)
0
Bundyo
Top achievements
Rank 1
answered on 10 Jun 2012, 07:38 AM
The transition adds translatez(0) to the view, so instead of the previous CSS rule, try adding this one instead:
.km-android .km-tabstrip
{
-webkit-transform: translatez(
0
);
}
0
Per Lindsø
Top achievements
Rank 2
answered on 14 Jun 2012, 09:29 PM
No, that didn't fix the problem. Srolling a listview will make all icons in tabstrip disappear. Only on pages shown after a transition there is no problems with the icons.
0
Hi Per,
I'm completely missing something obvious - you're using forced iOS platform. Can you please test both rules one by one again but change .km-android in front of every selector to .km-ios and see if this helps?
Greetings,
Kamen Bundev
the Telerik team
I'm completely missing something obvious - you're using forced iOS platform. Can you please test both rules one by one again but change .km-android in front of every selector to .km-ios and see if this helps?
Greetings,
Kamen Bundev
the Telerik team
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Per Lindsø
Top achievements
Rank 2
answered on 15 Jun 2012, 04:59 PM
Here is the result:
1) platform:"ios". Changed km-andrioid to km-ios in both rules.Tried them one by one and without rules. Same result in all three cases: no icons in tabstrip at all (blue squares).
2) platform:"android". Same procedure and similar results in alle three cases. Icons loads fine, but disappear (blue squares) if a listview is scrolled,.
As earlier menitions everything works fine if transition is used in the constructor - both with platform forced to ios and without, But the problem is still existing on the initial view.
1) platform:"ios". Changed km-andrioid to km-ios in both rules.Tried them one by one and without rules. Same result in all three cases: no icons in tabstrip at all (blue squares).
2) platform:"android". Same procedure and similar results in alle three cases. Icons loads fine, but disappear (blue squares) if a listview is scrolled,.
As earlier menitions everything works fine if transition is used in the constructor - both with platform forced to ios and without, But the problem is still existing on the initial view.
0
Accepted
Hi Per,
Managed to reproduce the issue on another S3 and fix it. Try adding this CSS rule to your page (remove the previous ones):
.km-ios /* use .km-android, when you're not forcing the iOS styling) */
{
-webkit-transform: translatez(0);
-webkit-transition: -webkit-transform .0001ms;
}
The problem was that simple 3D translation is not enough to switch on 3D acceleration in the S3's native browser (and probably PhoneGap, since it uses the same engine). To switch on 3D acceleration, a transition is now needed, no matter how short. I'm not sure what will be the effect of this rule in the iOS browser, so be sure to include it only in your Android version.
Kind regards,
Kamen Bundev
the Telerik team
Managed to reproduce the issue on another S3 and fix it. Try adding this CSS rule to your page (remove the previous ones):
.km-ios /* use .km-android, when you're not forcing the iOS styling) */
{
-webkit-transform: translatez(0);
-webkit-transition: -webkit-transform .0001ms;
}
The problem was that simple 3D translation is not enough to switch on 3D acceleration in the S3's native browser (and probably PhoneGap, since it uses the same engine). To switch on 3D acceleration, a transition is now needed, no matter how short. I'm not sure what will be the effect of this rule in the iOS browser, so be sure to include it only in your Android version.
Kind regards,
Kamen Bundev
the Telerik team
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Per Lindsø
Top achievements
Rank 2
answered on 21 Jun 2012, 04:42 PM
Woww, it really fixed the problem. Thanks a lot.
0
Marjan
Top achievements
Rank 1
answered on 14 Sep 2012, 09:43 AM
Hi, I have similar problem,
I was using older version of kendo ui mobile, and when I placed the new CSS style kendo.mobile.all.min.css all icons disappeared and are turned into blue squares. Also, I have trouble customizing Pull-to-refresh notification message...
I'm using Samsung Galaxy S2 as platform and i'm forcing IOS as style because android style is very poor.
Any suggestions?
I was using older version of kendo ui mobile, and when I placed the new CSS style kendo.mobile.all.min.css all icons disappeared and are turned into blue squares. Also, I have trouble customizing Pull-to-refresh notification message...
I'm using Samsung Galaxy S2 as platform and i'm forcing IOS as style because android style is very poor.
Any suggestions?