Animated icons are wobbling


#1

testing it on galaxy s4. On the Galaxy s2 and iphone 4s they don’t.

Can someone explain this behaviour ?
thanks in advance


#2

Hello RobOne :slight_smile:

Are you talking about a icon inside a tab menu for example?

I had a issue with this…

<a class="tab-item" href="#" ng-click="likeButton()">
  <i class="icon ion-heart"></i>
  <i class="number">13</i>
</a>

In the background, I change the the class ion-heart to ion-refreshing and the animated icon was running totally wrong…

I fixed this setting the height of the icons to auto, like:

.my-context .icon {
    height: auto;
}

With this animation was not 100% better, but was 90% better than before.

Guy, my English is a shit, sorry if what I told do not makes sense.


#3

Hi RobOne,

I recognise this behaviour, and I haven’t a solution for it. But I have also another thing/bug that’s maybe related: is your menu button and your back button also a little bit off-center? On a Nexus 5 with the wobbling icons, the menu and back buttons are a few pixels too high positioned.