search

PygmySlowLoris / vue-fab

Vue Floating Action Button
MIT License
273 stars 51 forks source link

Main-icon position not right in Firefox and Safari #4

Open thijsvdanker opened 7 years ago

thijsvdanker commented 7 years ago

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. fab-firefox

Safari

Resizing the window does not fix the issue in Safari fab-safari

IE

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

thijsvdanker commented 7 years ago

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 commented 7 years ago

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 commented 7 years ago

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 7 years ago

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

thijsvdanker commented 7 years ago

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 commented 7 years ago

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

dongjinahn commented 6 years ago

Hello! screen shot 2017-09-25 at 3 29 03 am

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

dongjinahn commented 6 years ago

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 commented 6 years ago

By adding 

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

resolves the problem!