Missing icons with platform=blackberry on android

6 posts, 0 answers
  1. Ali
    Ali avatar
    16 posts
    Member since:
    Aug 2012

    Posted 29 Aug 2012 Link to this post

    Hi Kendo guys,

    When I try to force platform blackberry on android, all the icons show blank boxes.

    app = new kendo.mobile.Application($(document.body), {platform: "blackberry" });

    Everything works great on the desktop browsers, i.e. Safari and Chrome, but on Android I get empty boxes.

    I tried to debug the issue, using Chrome Debug Console, I found that I can replicate the same on Desktop by removing the tick from the style:
    -webkit-mask-image: url("images/icons.png");

    If I use, ios or android as platform, everything works. Except the blackberry.

    On a side note, I already tired this CSS and it has no impact.
    .km-blackberry
    {
        -webkit-transform: translatez(0);
        -webkit-transition: -webkit-transform .0001ms;
    }

    Any solution?
  2. Kamen Bundev
    Admin
    Kamen Bundev avatar
    1532 posts

    Posted 30 Aug 2012 Link to this post

    Hello Ali,

    Can you provide a sample page where we can reproduce this? Could you also specify which Android device and version are you using for testing?

    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. Ali
    Ali avatar
    16 posts
    Member since:
    Aug 2012

    Posted 30 Aug 2012 Link to this post

    Hello Kamen,

    I attached a zip file with the HTML.

    I tried two Android devices, Samsung Note running ICS 4.0.4, Samsung Galaxy Nexus running JB 4.1.1.

    I even tried the Emulator, same issue.

    It works perfectly on Safari, Firefox and Chrome, but not only an Android Browser.
  4. Kamen Bundev
    Admin
    Kamen Bundev avatar
    1532 posts

    Posted 05 Sep 2012 Link to this post

    Hello Ali,

    Due to bugs in the Android native browser, not all platforms skins are directly compatible with it. Add this rule to your CSS to fix the icons:
    .km-blackberry .km-icon
    {
        -webkit-transform: none;
    }

    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!
  5. Ali
    Ali avatar
    16 posts
    Member since:
    Aug 2012

    Posted 05 Sep 2012 Link to this post

    Hello Kamen,

    There also the loader icon becomes a rotating box on android!

    Regards,
    Ali
  6. Kamen Bundev
    Admin
    Kamen Bundev avatar
    1532 posts

    Posted 05 Sep 2012 Link to this post

    Hello Ali,

    Yes, that's a similar issue, since the loader rotates with CSS3 animation and masks break and should be avoided again. Try if adding this CSS helps:
    .km-root .km-blackberry .km-loading,
    .km-blackberry .km-load-more .km-icon,
    .km-root .km-blackberry .km-scroller-refresh .km-icon
    {
        -webkit-mask-image: none;
        background: url("images/icons.png");
        background-size: auto 100%;
        background-position-x: 78%;
    }


    Same goes for the other platforms if used on Android.

    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!
Back to Top