Chrome Text Flickr on using Css rotate. 'backface-visibility' making things worse

Question

Firstly, here's the fiddle: http://jsfiddle.net/krish7878/wytv7n7n/3/

I am using CSS rotate an icon on hover. I tried using 'webkit-backface-visibility: hidden' and '-webkit-font-smoothing: antialiased;'. They just make text thick and ugly.

Here's the code:

<div class="container">
        <div class="row">
            <div class="blog-item col-lg-4 col-md-4 col-sm-4">
                <div class="image">
                    <img src="http://3.bp.blogspot.com/-E3B9ce7Ck20/UFBfFrkbV8I/AAAAAAAADX8/fFMHEyZcZDg/s400/Animated-Wallpapers.jpg">
                    <div class="overlay">
                        <a href="#">
                            <i class="fa fa-plus"></i>
                        </a>
                    </div><!-- /.overlay -->
                    </div><!-- /.image -->
                    <h3>Welcome to A Safer World</h3>
                    <p>Lorem ipsum dolor sit amet, consectetur </p>
            </div><!-- /.blog-item -->
        </div><!-- /.row -->
    </div><!-- /.container -->

CSS:

.blog-item{
overflow: hidden;
}
.image{
position: relative;
overflow: hidden;
}
.image .overlay{
position: absolute;
width: 100%;
height: 100%;
background-color: #49c8ff;
top: 0px;
opacity: 0;

transition:         all 400ms ease-in-out;
-moz-transition:    all 400ms ease-in-out;
-webkit-transition: all 400ms ease-in-out;
-o-transition:      all 400ms ease-in-out;
-ms-transition:     all 400ms ease-in-out;
}
.blog-item:hover .overlay{
opacity: 1;
}
.blog-item h3,
.blog-item p{
font-family: "Source Sans Pro";
font-weight: "400";   
 }
.overlay a{
width: 35px;
height: 35px;
border: 1px solid #fff;
position: absolute;
display: block;
margin: 0 auto;
left: 0px;
right: 0px;
border-radius: 100%;
top:30%;
text-align: center;

transition:         all 400ms ease-in-out;
-moz-transition:    all 400ms ease-in-out;
-webkit-transition: all 400ms ease-in-out;
-o-transition:      all 400ms ease-in-out;
-ms-transition:     all 400ms ease-in-out;
}
.image:hover a{
top: 40%;

-webkit-transform: rotate(180deg);
-moz-transform: rotate(180deg);
-o-transform: rotate(180deg);
-ms-transform: rotate(180deg);
transform: rotate(180deg);
}
.overlay a:hover{
background-color: #297595;
border: 1px solid #297595;
}
.overlay a i{
color: #fff;
position: relative;
top: 7px;
}

Turns out this flickering happens only on jsfiddle, my issue of text flickr was effecting other elements (http://timekill.in/test/with-backface/flickr.html). I did solve it by adding "overflow:hidden" for .image container. If you find out the solution for flickr on jsfiddle it would be great. — chandan, Aug 10 '14 at 21:48
No that didn't solve my flickr problem. It was solved temporarily, it now appears. — chandan, Aug 10 '14 at 22:05
@Eirenaios: When I hover on the main div, plz check in the link:timekill.in/test/with-backface/flickr.html and the fiddle — chandan, Aug 11 '14 at 19:44

score 3 · Accepted Answer · edited May 23 '17 at 11:43

Well , chrome will use DirectWrite from version 37 and till that , most WD know that it dosen't renders fonts correctly.

Here its discussed : Chromium issue

And another SO question with detailed answers : SO link

Try changing your font-family it solved by changing it to sans-sarif or Try Other Fonts!

FlickerRemoved

.blog-item h3, .blog-item p {
    font-family:sans-serif;
    font-weight: 400";

}

Chrome Text Flickr on using Css rotate. 'backface-visibility' making things worse

1 Answers1