css - Chrome : Text blurry when skew back : skew(-10deg) -> skew(10deg) -

i want skew parent , skew back on child.

example : html

<div class="parent"> <!-- skew(-10deg) -->     <div class="child">hello</div> <!-- skew(10deg) (skew back) --> </div> 

example : css

.parent {     transform: skew(-10deg); } .child {     transform: skew(10deg); } 

text inside seems ok firefox, safari. not chrome , opera bit blurry

i have use -webkit-backface-visibility: hidden; reduce box pixelated in chrome

firefox :

chrome :

firefox vs chrome :

or zoomed photoshop

live example : http://jsfiddle.net/1tpj1kka/

any idea ?

---

note !!! : web-tiki's answer way solution prevent problem. if answered real solution resolved skew problem (real fix), accept answer.

the "blurry text" after 2d or 3d transforms webkit browsers has been discused many times. in case, can apply transform on pseudo element text isn't affected skew property.

it alow use 1 tag in markup :

@import url(http://fonts.googleapis.com/css?family=oswald);  body{color:#fff;font-weight: bold;font-size:50px;font-family:'oswald',sans-serif;}    .parent {      width: 300px;      overflow: hidden;      padding-left: 5%;      position:relative;  }    .parent::before {      content :'';      position:absolute;      top:0;left:0;      width:100%; height:100%;      background: rgba(90,190,230,0.9);      transform-origin:0 0;      transform:skew(-10deg);      z-index:-1;  }

<div class="parent">      hello  </div>