CSS transform rotate bug in Firefox?

I have some CSS applying a hover rotate transform on my social icons, which have a border radius applied. These work fine in Chrome, but in Firefox, when I hover, the animation is very odd, with flashes of the animation appearing at the bottom of the web page and zooming across the screen (difficult to explain).

If I remove the border radisu and the icons are square, then the rotation works fine. It seems only to be a problem when the border radius is applied.

--- Here is my HTML code:

<div class="social-icons">
<a href="https://twitter.com" target="_blank"><div class="twitter-hover social-slide"></div></a>
<a href="https://www.facebook.com" target="_blank"><div class="facebook-hover social-slide"></div></a> <a href="https://uk.linkedin.com" target="_blank"><div class="linkedin-hover social-slide"></div></a> </div>

--- Here is my CSS code:

.social-slide { height: 24px; width: 24px; margin: 5px; float: left; -webkit-transition: all ease 0.5s; -moz-transition: all ease 0.5s; -o-transition: all ease 0.5s; -ms-transition: all ease 0.5s; transition: all ease 0.5s; } .social-slide:hover { background-position: 0px -24px; transform:rotate(360deg); -webkit-transform:rotate(360deg); -moz-transform:rotate(360deg); }

.twitter-hover { border-radius: 50px; background-image: url('../img/twitter-hover.png'); background-size: 24px 48px; }

.facebook-hover { border-radius: 50px; background-image: url('../img/facebook-hover.png'); background-size: 24px 48px; }

.linkedin-hover { border-radius: 50px; background-image: url('../img/linkedin-hover.png'); background-size: 24px 48px; }

.social-icons { height: 24px; width: 102px; margin: 30px auto; }

Any ideas? Thanks.

Edit: Interestingly, if I add a border of 1px, this fixes the problem, but I don't want the border, even if transparent as it seems to hide some of the background image.