html - 关于使用 Css 旋转的 Chrome Text Flickr。 'backface-visibility' 让事情变得更糟

Question

首先，这是 fiddle :http://jsfiddle.net/krish7878/wytv7n7n/3/

我正在使用 CSS 在悬停时旋转图标。我尝试使用“webkit-backface-visibility: hidden”和“-webkit-font-smoothing: antialiased;”。它们只会让文字变粗变丑。

代码如下:

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

Answer 1

好吧，chrome 将从版本 37 开始使用 DirectWrite，直到那个版本，大多数 WD 都知道它无法正确呈现字体。

此处讨论:Chromium issue

还有另一个有详细答案的 SO 问题:SO link

---

尝试通过将其更改为 sans-sarif 或尝试其他字体!

FlickerRemoved

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

}