TabStrip wrong active custom icon when using iOS7 Style - on iOS Simulator or iOS Device

[Gilles]

Dear Telerik Support

We are in the upgrading process of adjusting our app to meet the iOS7 style.
Custom icons are used within TabStrip, with the newest Version v2013.2.1002 we are facing the issue that these icons don't get proper active states.

To help you, that you can help us I've created a sample so that you can reproduce the issue. Its based on your standard TabStrip example.
Please note that the problem only appears when using the app on an iPhone or in the iPhone Simulator from Xcode. In Chrome / Ripple everything is fine.

As you see in the attached screenshot, the active TabStrip element changes the text-color but the icon stays the same. Surprisingly the icon gets colored right when you click on an input box on the according content page. But even then, all custom icons change their color. Using the normal icons from the font like the globe works as it should.

You find the example and two screenshots which are showing the wrong behavior in the attachments.
Would be awesome to have a solution or workaround soon.
Best Regards
Gilles

[Kiril Nikolov]

Hi Gilles,

The difference comes from the fact that when icon is clicked the .km-state-active class is applied, but as the icon is a custom one the color property is not applied. You can fix this, by setting the color yourself using come CSS rules like this:

.km-state-active .km-icon{
   color:#007aff !important;
}

 Regards,
Kiril Nikolov
Telerik