title: backface visibility Making text blurry in child element
body: <p>I'm trying to make stack-able hexagons for my layout, made using css3's wonderful transform capabilities! The only problem is that when I and a :hover effect to change opacity on it, during the transition it changes the anti-alias properties, smooths all lines, and makes the text blurry. It also temporarily dis-aligns everything around it, though it all settles back after a second or so. While this doesn't necessarily conflict with the functionality of the site, it's rather sloppy looking.</p>
  
  <p>I tried to resolve the issue by changing the code to this:</p>
  
  <p><a href="http://jsfiddle.net/QPbJL/" rel="nofollow">http://jsfiddle.net/QPbJL/</a></p>
  
  <p>While this fixes the bugginess of it all, now my text is blurry, during transition and otherwise. I've tried adding -webkit-backspace-visibility: none; to the .HexDesc, since that's the direct container for the text.</p>
  
  <pre><code>.HexIn2 {
  overflow: hidden;
  width: 100%;
  height: 100%;
  -webkit-backface-visibility:hidden;
  
  -webkit-background-size: 125%;
  -moz-background-size: 125%;
  background-size: 125%;
  visibility: visible;
  
  -webkit-transform: rotate(-60deg);
  -moz-transform: rotate(-60deg);
  -o-transform: rotate(-60deg);
  -ms-transform: rotate(-60deg);
  transform: rotate(-60deg);
  transition: all 0.5s ease;
  }
  
      .HexDesc {
      padding: 3px; 0px 3px 0px;
      -webkit-backface-visibility:none !important;
      background: #ffffff;
      color:#000;
      margin-top:106px;
      height: 81px;
      font-family: 'PT Sans Narrow', sans-serif;
      line-height:85%;
      letter-spacing:1px;
      font-size: 13px;
      }
  </code></pre>
  
  <p>However, this has had zero effect. I've also tried throwing "!important" in there, to try and make it over-ride everything else in that div, and zilch again! It's like anything in the HexDesc container as far as backface-visibility has absolutely zero effect! This is very frustrating :C I was wondering if anyone knew why this was happening, and any way I could get around it?</p>