Blurry text at Safari

Question

I'm having a bad time with this text gradient-colored.

I've been through some tuts that teach how to apply gradient to a dynamic text. It works, but Safari can't handle it well, it seems.

Chrome rendering

Safari rendering

Two problems: this line at the top of the element, looks like it is a bug with -webkit-background-clip: text;, But this problem is the lesser, cuz I can deal with it. The real problem is the blurry text, tho.

CSS

.title {
    font-weight: 700;
    font-size: 50px;
    line-height: 1em;
    text-align: right;
    color: #981d97;
    display: block;
    background-image: -webkit-linear-gradient(left ,#ffa300 0,#e31c79 50%,#981d97 100%);
    background-image: linear-gradient(to right,#ffa300 0,#e31c79 50%,#981d97 100%);
    -webkit-background-clip: text;
    -moz-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    -moz-text-fill-color: transparent;
    text-fill-color: transparent;
    -webkit-font-smoothing: antialiased;
}

My fiddle: https://jsfiddle.net/d3vLd4ft/1/

EDIT

• I've followed mcclaskiem's hint about changing line-height from 1em to 50px because it could be at a half-pixel height. Didn't work
• I've noticed that the font get slightly better while the browser is being resized, but once it stops, the font get blurry again.

Answer 1

There is one trick that can make the browser accelerate graphics, it made the font look much better:

     -webkit-transform: translate3d(0,0,1px);
        -moz-transform: translate3d(0,0,1px);
         -ms-transform: translate3d(0,0,1px);
          -o-transform: translate3d(0,0,1px);
             transform: translate3d(0,0,1px);

The result:

From this

It goes to this