Rozmycie lementów przy skew, translate3d i overflow: hidden

Witam,

mam specyficzny problem z transformacjami CSS w Chromie. Jeżeli na stronie jest gdziekolwiek zastosowana translacja3d a element z skew ma overflow: hidden to elementy wewnątrz są rozmyte. Niestety potrzebuje overflow: hidden na tym elemencie, oraz zewnętrzny plugin jQuery korzysta z translate3d. Dodanie translacji3d do elementów z skew trochę pomaga, no ale niestety tylko trochę. Czy ktoś spotkał podobny problem i ma pomysł na rozwiązanie? Potrzebuję pilnie rozwiązać ten problem, a szukałem już naprawdę sporo czasu i nic do końca nie pomaga.

https://jsfiddle.net/hwmdkr6j/

<div class="z">
XXX
</div>
 <div class="a">
    <div class="b">
        <span class="c">
        Lorem ipsum dolor sit amet.
        </span>
    </div>
</div>

   .a {
        background: red;
        display: inline-block;
        padding: 20px;
        transform: skewY(-3deg) translate3d(0, 0, 0);
        overflow: hidden; /* To jest mi niezbędne */
    }

    .b {
        color: #fff;
        transform: skewY(3deg) translate3d(0, 0, 0);
        font-size: 32px;
    }
    .c {
        background: white;
        color: blue;
    }

    .z {
        transform: translate3d(2px, 0, 0); /* To jest niezbędne, ponieważ korzysta z tego zewnętrzny plugin jQuery */
    }

Wygląda na to, że dodanie do klasy .a

 -webkit-perspective: 1;

wyostrza w jakimś stopniu tekst.
Jednak w prównaniu z Firefoxem wydaje mi się jeszcze nie do końca wyostrzony.

Ok, dzięki, no rzeczywiście trochę pomogło, powoli do celu :D

Ktoś jeszcze jakieś rady, pomysły? :)