Blurrytテキスト：クローム

Question

に回転し、私はこの

のように私のWebページにリスト六角形を持っているが、私は、変換を使用していた：それで正しいテキストを持つように回転させるが、クロムテキストでありますぼやけ、Mozillaで正しく表示されます

私は多くを検索しましたが、正確な方法はありませんでした。

私は、これらの六角形 http://www.queness.com/resources/html/css3-hexagon/index.html

を作るために、この記事を使用し、これは私のhtml

<div class="hex hex-3"> 
      <div class="inner"> 
       <h4>Energy</h4> 
       <hr /> 
       <p> 

       </p> 
      </div> 
      <a href="#"></a> 
      <div class="corner-1"></div> 
      <div class="corner-2"></div> 
     </div> 

とI変換を使用したCSSの一部です：

.hex { 
transform: rotate(30deg); 
-webkit-transform:rotate(30deg); 
} 

.inner { 
transform: rotate(-30deg); 
-webkit-transform:rotate(-30deg); 
} 

.hex .corner-1 { 
    z-index: -1; 
    transform: rotate(60deg); 
} 

.hex .corner-2 { 
    transform: rotate(-60deg); 
} 
.hex .corner-1:before { 
    transform: rotate(-60deg) translate(-87px, 0px); 
    transform-origin: 0 0; 
} 

.hex .corner-2:before { 
    transform: rotate(60deg) translate(-48px, -11px); 
    bottom: 0; 
} 

それに回転どのようにそれを修正するための任意のアイデア？

Answer 1

は忙しかったし、それは見つけるために私にしばらく時間がかかったが、次のCSSは、問題解決：私はちょうどskewY tranformを持っていたバグの中を発見したプロジェクトと似問題を抱えていた

.hex .corner-1, 
.hex .corner-2, 
.hex .corner-1:before, 
.hex .corner-2:before { 
    backface-visibility: inherit !important; 
} 

を私のプロジェクトでは、それは不必要なrotateZ（0）変換によって引き起こされました。