1.3.4 Animations Off-center about ionicons

[adamdbradley]

@zslabs So I think I have it fixed. It was off-center on Android too and now it seems to work. Can you double check its working on your end? http://ionicons.com/animation.html

Thanks

[zslabs]

Yep all fixed now, thanks!

[fredgalvao]

(This might be better suited as a ionic issue, but I thought I should try this first.)
Although the animations seen at <> work as expected, using them on ionic with some of my devices still shows the off-center behaviour.

I made a screenrecord of a simple example: https://dl.dropboxusercontent.com/u/9843306/ionicon.mp4

Details:

1. Tested on [email protected], [email protected], [email protected] and GoogleChrome-Ripple@34
2. It's barely noticeable on the [email protected]
3. It seem to be much more visible on Kitkat devices and somewhat visible on Chrome
4. I've tested this behaviour on both standalone icons, button icons, and using $ionicLoading
5. Happens with all animated icons, but is more visible on some of them
6. Debugging the webview remotely on chrome, I found out that on my MotoG, setting height: 40px instead of the default line-height: 42px fixes it completely. On GoogleChrome-Ripple though I wasn't able to find a value for height or a different change that could fix it, but using the same height: 40px above made it worse than it actually is.

[bensperry]

Thanks @fredgalvao for the info. We'll definitely look into this...

[cayter]

Galaxy Note 3 built-in browser also has the same issue.

[danjohnso]

Agreed that the animated icons are very off. Galaxy S3 on 4.4 web view has a noticeable wobble at all sizes, especially bad as they get scaled up.

[fredgalvao]

This was fixed for me on beta.7 of Ionic. I don't know which commit or issue, but I remember seeing "line-height: 40" somewhere in the changes, and I'd bet that was what fixed it.
None of the browsers/cases I mentioned before have the issue visible now.

[fredgalvao]

Actually, I went in and found the commits (just to be clear, I don't mean those are the commits that fixed it for me, I just saw that those were the only changes that had something to do with the line-height issue, so they may be):

1- ionic-team/ionic-framework@c30be67#diff-f316ce1132cb10abff622cda47400862R8
2- ionic-team/ionic-framework@0e647e7#diff-f316ce1132cb10abff622cda47400862R20

[danjohnso]

I am on beta8 and I didn't see anything in the previous changelog that would cause this to reappear.

[shai126]

Hi, I'm experiencing this too. Tried in beta.7 and beta.8, both gave the same result: no wobble on [email protected] (actual device), but severe wobble on [email protected] (emulator).

[bensperry]

Hmmm... you know, this has been a tough one for us. It's really hard to make the wobble not happen on all the different devices because all the phones translate and display fonts a little differently. We don't see it on the particular phones we test on here.

Moreover, the vast majority of devices do not have this problem, it's a small minority that do - so fixing it for those particular cases causes problems for the others. That being said, we'd love any help or advice here (we might be doing something wrong still).

If you'd like, you can go in a test them through here: https://github.com/driftyco/ionic/tree/master/test/css.

[danjohnso]

Strange @shai126, I'm running on Sprint Galaxy S3 on Android 4.4.2 and the wobble is there, especially bad when the font size is increased to make it more visible.

[shai126]

That sounds consistent - Android 4.4 seems to wobble more than 4.3 from
what people have said here. What I find curious is that I can't replicate
the problem with any of FontAwesome's spinning icons - I wonder if the
secret lies somewhere in their source...
On 26 Jun 2014 17:28, "danda1man" [email protected] wrote:

Strange @shai126 https://github.com/shai126, I'm running on Sprint
Galaxy S3 on Android 4.4.2 and the wobble is there, especially bad when the
font size is increased to make it more visible.

—
Reply to this email directly or view it on GitHub
#45 (comment).

[danjohnso]

The issue is not just on android, even on my desktop and laptop the wobble is bad, especially as the font size increases making the animated icons unusable, probably going to switch to font-awesome since their animated icons don't have this issue anywhere that I have encountered.

[ajgassner]

+1

[marcwhitbread]

+1

[ryanmillerdev]

+1

[schirrel]

shoul this be closed?

[bensperry]

Yes