transform: scale деформирует текст

Писал анимацию для кнопок и столкнулся с проблемой. Когда анимация срабатывает текст на кнопке немного расплывается. Видел в интернете много обсуждений, но решения так и не нашел.

Возможно вы подскажите, как это можно исправить.
Использую вот такую структуру:

.ink
    z-index: 100
    display: block
    position: absolute
    background: rgba(255, 255, 255, 0.4)
    border-radius: 100%
    transform: scale(0)
@keyframes ripple
    100%
        opacity: 0
        transform: scale(2.5)
.animate
    animation: ripple .9s linear

Ну и вызываю потом просто через js добавлением нужного блока с этими классами

js code:

//animate start
$('[data-href="#mypres"]:not(.ripplelink)').each(function(){
var $this = $(this);
$this.css('overflow', 'hidden');
$this.css('z-index', '0');
var ink, d, x, y;
setInterval(function() {
    if($this.find(".ink").length === 0){
        $this.prepend("<i class='ink'></i>");
    }
    ink = $this.find(".ink");
    ink.removeClass("animate");
    if(!ink.height() && !ink.width()){
        d = Math.max($this.outerWidth(), $this.outerHeight());
        ink.css({height: d, width: d});
    }
    x = Math.round(Math.random()*ink.width() - ink.width()/2);
    y = Math.round(Math.random()*ink.height() - ink.height()/2);
            // y = 0;
            // x = e.pageX - $this.offset().left - ink.width()/2;
            // y = e.pageY - $this.offset().top - ink.height()/2;
            ink.css({top: y+'px', left: x+'px'}).addClass("animate");
          }, 3000)
 });
//animate end