CODEWITHSUNDEEP
javascriptcssgoogle-chrome
neda Derakhshesh
neda Derakhshesh

Reputation: 1163

Blurryt text by transform: Rotate in Chrome

I have a list Hexagons In my web page like this

enter image description here

I had to use transform:rotate to have a correct text in it but in chrome text is Blurry ,in Mozilla it shows correctly

I searched a lot but there were no exact way.

I used this article to make these hexagons http://www.queness.com/resources/html/css3-hexagon/index.html

and this is my 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>

and some part of css which I used transform:rotate in it

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

any idea how to fix it?

Upvotes: 0

Views: 70

Answers (1)

seahorsepip
seahorsepip

Reputation: 4809

Have been busy and it took me a while to find out but following css solves the issue:

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

I was just having a similiar issue with a project that had a skewY tranform and found the bug while working on that, though in my project it was caused by a unnecessary rotateZ(0) transform.

Upvotes: 1

Related Questions