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

Missing icons with platform=blackberry on android

5 Answers 42 Views
General Discussions
This is a migrated thread and some comments may be shown as answers.
Ali
Top achievements
Rank 1
Ali asked on 29 Aug 2012, 06:22 PM
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?

5 Answers, 1 is accepted

Sort by
0
Kamen Bundev
Telerik team
answered on 30 Aug 2012, 07:48 AM
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!
0
Ali
Top achievements
Rank 1
answered on 30 Aug 2012, 08:42 PM
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.
0
Kamen Bundev
Telerik team
answered on 05 Sep 2012, 07:58 AM
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!
0
Ali
Top achievements
Rank 1
answered on 05 Sep 2012, 08:23 AM
Hello Kamen,

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

Regards,
Ali
0
Kamen Bundev
Telerik team
answered on 05 Sep 2012, 08:40 AM
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!
Tags
General Discussions
Asked by
Ali
Top achievements
Rank 1
Answers by
Kamen Bundev
Telerik team
Ali
Top achievements
Rank 1
Share this question
or