missing icons in tabstrip with platform=ios on android

Thread is closed for posting
13 posts, 1 answers
  1. lindsoe
    lindsoe avatar
    21 posts
    Member since:
    Jul 2007

    Posted 04 Jun 2012 Link to this post

    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???

  2. Kamen Bundev
    Admin
    Kamen Bundev avatar
    1532 posts

    Posted 05 Jun 2012 Link to this post

    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!
  3. Kendo UI is VS 2017 Ready
  4. lindsoe
    lindsoe avatar
    21 posts
    Member since:
    Jul 2007

    Posted 05 Jun 2012 Link to this post

    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? 

  5. Kamen Bundev
    Admin
    Kamen Bundev avatar
    1532 posts

    Posted 06 Jun 2012 Link to this post

    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!
  6. lindsoe
    lindsoe avatar
    21 posts
    Member since:
    Jul 2007

    Posted 06 Jun 2012 Link to this post

    Yes, it is Samsung Galaxy S 3 with Android 4.0.
  7. lindsoe
    lindsoe avatar
    21 posts
    Member since:
    Jul 2007

    Posted 07 Jun 2012 Link to this post

    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.. ;-)  
  8. Kamen Bundev
    Kamen Bundev avatar
    2 posts
    Member since:
    Jul 2012

    Posted 10 Jun 2012 Link to this post

    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);
    }
  9. lindsoe
    lindsoe avatar
    21 posts
    Member since:
    Jul 2007

    Posted 14 Jun 2012 Link to this post

    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. 

  10. Kamen Bundev
    Admin
    Kamen Bundev avatar
    1532 posts

    Posted 15 Jun 2012 Link to this post

    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!
  11. lindsoe
    lindsoe avatar
    21 posts
    Member since:
    Jul 2007

    Posted 15 Jun 2012 Link to this post

    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. 





  12. Answer
    Kamen Bundev
    Admin
    Kamen Bundev avatar
    1532 posts

    Posted 21 Jun 2012 Link to this post

    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!
  13. lindsoe
    lindsoe avatar
    21 posts
    Member since:
    Jul 2007

    Posted 21 Jun 2012 Link to this post

    Woww, it really fixed the problem. Thanks a lot. 
  14. Marjan
    Marjan avatar
    2 posts
    Member since:
    Sep 2012

    Posted 14 Sep 2012 Link to this post

    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?
Back to Top
Kendo UI is VS 2017 Ready