Missing icons with platform=blackberry on android

[Ali]

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?

[Kamen Bundev]

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

[Ali]

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.

[Kamen Bundev]

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

[Ali]

Hello Kamen,

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

Regards,
Ali

[Kamen Bundev]

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