Main-icon position not right in Firefox and Safari

[thijsvdanker]

The position of the main icon is not right when using Firefox 54.0 or Safari on OS X.

Firefox

It is fixed when manually scaling the window after loading the page.

Safari

Resizing the window does not fix the issue in Safari

IE

I've also seen this behaviour in IE, but don't have a pc here to create a gif.

[thijsvdanker]

Created a PR in #5

I'm not sure what the reason was to make it absolute in the first place, so some review of this PR is needed.

[hazzo]

Hi @thijsvdanker, thanks for concerning about this.

The reason about absolute positioning it's to achieve the affect that icon transforms when user clicks on the fab button. Did you try it without absolute position and worked well for you with different icons? Because did not go well for me.

I only get this "bug" with IE (not firefox, couldn't try it on safari). Maybe you should update your browsers because they seem not to be working well with how flexbox is implemented. Regarding IE, I test it with version 11 which it's supposed to be using the new flexbox syntax but for some reason I can't make it work.

I will investigate later why this happens on IE.

[thijsvdanker]

I'm running the latest Firefox on OSX (54.0). I've created a new PR in #8 that addresses the transforming issue.

[hazzo]

Commented on the PR. The issue it's partially solved. Thanks for the effort!

[thijsvdanker]

Thx for reviewing @hazzo.
I have to wrap up a release by tomorrow, and might not be able to do fix the remaining glitches at this moment.

[hazzo]

Thanks @thijsvdanker, no problem! If I manage to fix the problem I'll comment here.

[dongjinahn]

Hello!

safari bug still exists (locates at a little bit different position)

[dongjinahn]

in my case, since i'm using the small size of your vue-fab,
i add margin: -11px to adjust main icons it works for me right now
-- oh wait, it crushes at chrome now... LUL
awe--some css..

[dongjinahn]

By adding

i.md-24.material-icons {
    left: 16px;
    right: 16px;
    top: 16px;
    bottom: 16px;
}

resolves the problem!