backface visibility Making text blurry in child element

Problem

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.

I tried to resolve the issue by changing the code to this:

http://jsfiddle.net/QPbJL/

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.

.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;
    }

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?

Problem courtesy of: SarahGrace

Solution

It is often the case with "middle" values. For rotation, you'll get the blur off only at 0, 90, 180, 270, 360... This is a bug from the browsers themselves. You might notice that this applies to many things in css (for example, opacity often has trickle down effect when not at 1 or 0).

In your case, in your jsfiddle, if you replace all 120deg with 180deg and all 60deg with 90deg, it'll work perfectly. (meaning no blur, but you don't get the hexagon anymore). For the triangles, i'd recommend making them with this border hack (http://apps.eky.hk/css-triangle-generator/). You can get to an identical result.

For the "temporarily dis-align", it is also a known bug from Chrome (and possibly other browsers, I don't know). Even if you go to gmail or youtube, you'll still see that happening.

Solution courtesy of: Sheraff

Discussion

There is currently no discussion for this recipe.

This recipe can be found in it's original form on Stack Over Flow.