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

missing icons in tabstrip with platform=ios on android

12 Answers 258 Views
Application
This is a migrated thread and some comments may be shown as answers.
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???

12 Answers, 1 is accepted

Sort by
0
Kamen Bundev
Telerik team
answered on 05 Jun 2012, 10:35 AM
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
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? 

0
Kamen Bundev
Telerik team
answered on 06 Jun 2012, 07:11 AM
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
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 (Kamen Bundev)
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
Kamen Bundev
Telerik team
answered on 15 Jun 2012, 02:08 PM
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
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. 





0
Accepted
Kamen Bundev
Telerik team
answered on 21 Jun 2012, 02:33 PM
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
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?
Tags
Application
Asked by
Per Lindsø
Top achievements
Rank 2
Answers by
Kamen Bundev
Telerik team
Per Lindsø
Top achievements
Rank 2
Bundyo (Kamen Bundev)
Top achievements
Rank 1
Marjan
Top achievements
Rank 1
Share this question
or