Button transform scale flickering - css

Question

I have a simple button, that I want to scale up by 10% when the user hovers on it.
I tried to achieve that by using css3 "transform: scale(1.1);" together with "transition: all .3s ease-in-out;".
It scales the button up, but also causes the text to flicker in the process. I tested it in Chrome, FF and IE - all had the same issue.
CSS:
a {
display: inline-block;
padding: 30px;
margin-top: 10%;
margin-left: 15%;
font-size: 20px;
color: #fff;
background-color: #000;
text-decoration: none;
transition: all .3s ease-in-out;
}
a:hover {
-moz-transform: scale(1.1);
-webkit-transform: scale(1.1);
-o-transform: scale(1.1);
transform: scale(1.1);
}
Example: https://jsfiddle.net/Lfwnejkc/1/
I tried to find a solution and finally managed to fix it in Chrome by adding "backface-visibility: hidden;" to the button. The text is now bit blurrier but thats alright. Unfortunately for FF and IE this doesn't work and text inside the button is still flickering when it scales up.
a {
display: inline-block;
padding: 30px;
margin-top: 10%;
margin-left: 15%;
font-size: 20px;
color: #fff;
background-color: #000;
text-decoration: none;
transition: all .3s ease-in-out;
backface-visibility: hidden;
}
a:hover {
-moz-transform: scale(1.1);
-webkit-transform: scale(1.1);
-o-transform: scale(1.1);
transform: scale(1.1);
}
Example: https://jsfiddle.net/Lfwnejkc/2/
I spent half a day yesterday googling around and trying to fix it. Unfortunately so far I haven't been successful.
Has anyone encountered such a problem and what is the best way to fix it?

Answer 1

Not perfect, but somehow better, is to move the element in the z plane, and get the zoom effect as a result of the perspective
a {
display: inline-block;
padding: 30px;
margin-top: 10%;
margin-left: 15%;
font-size: 20px;
color: #fff;
background-color: #000;
text-decoration: none;
transition: all 1s ease-in-out;
transform: perspective(1000px) translateZ(0px);
}
a:hover {
transform: perspective(1000px) translateZ(300px);
}
BUTTON