css 过渡时的字体干扰

Question

我使用 CSS3 转换来实现产品上的悬停效果，标签从底部出现在产品图片上方：

标签出现时，出现0.5秒左右，字体不流畅清晰，过渡结束后0.5~1秒左右，字体清晰流畅。 Firefox 会出现此问题。 Chrome 和 IE 可以忽略不计。

这个问题有什么解决办法吗？

更新：

.product-hover {
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
  overflow: hidden;
  border: 1px solid #ddd;
 
}
.product-hover:after {
  background: none repeat scroll 0 0 #000;
  content: "";
  height: 100%;
  left: -100%;
  opacity: 0.6;
  position: absolute;
  top: 0;
  width: 100%;
  transition: .4s;
}
.product-hover a {
  background: none repeat scroll 0 0 #000;
  border-radius: 5px;
  color: #fff;
  display: block;
  font-size: 15px;
  left: 10%;
  margin: 0;
  padding: 10px;
  position: absolute;
  text-align: center;
  text-transform: uppercase;
  border: 1px solid #ff0022;
  width: 80%;
  z-index: 99;
  transition: .4s;
  text-decoration:none;
}
.product-hover a:hover {
  background: #000;
  text-decoration: none;
  border-color: #444;
}
.product-carousel-price ins {
  color: #ff0022;
  font-weight: 700;
  margin-right: 5px;
  text-decoration: none;
}
.product-hover a i.fa {
  margin-right: 5px;
}
.product-hover a.add-to-cart-link {
  top: -25%;
  display: none;
}
.product-hover a.view-details-link {
  bottom: -25%;
}
.single-product h2 {
  font-size: 18px;
  line-height: 25px;
  margin-bottom: 10px;
  margin-top: 15px;
}
.single-product h2 a {
  color: #222;
}
.single-product p {
  color: #ff0022;
  font-weight: 700;
}
.single-product {
  overflow: hidden;
}
.single-product:hover {} .single-product:hover .product-hover a.add-to-cart-link {
  top: 25%;
}
.single-product:hover .product-hover a.view-details-link {
  bottom: 40%;
}
.single-product:hover .product-hover:after {
  left: 0;
}

<div class="single-product">
  <div class="product-f-image">
    <img src="images/products/product-3.jpg" />
    <div class="product-hover">
      <a href="single-product.html" class="view-details-link"><i class="fa fa-link"></i>مشاهده محصول</a>
    </div>
  </div>

  <h2><a href="single-product.html">New Bag</a></h2>
  <div class="product-carousel-price">
    <ins>0.00</ins>  <del>5.00</del>
  </div>
</div>

Answer 1

我在我的设置中看不到您提到的错误（Firefox 40.0a2 和 Chrome 41.0，Linux）。我认为它在整个动画中都像您的 "after completion" 图片一样大胆而流畅。

您可以尝试的一件事是手动将文本加粗并应用难以察觉的转换，看看您是否至少可以强制文本始终位于 "first state".

.view-details-linnk {
   transform: rotate(0.00001deg);
}

我将此技巧应用于其他 CSS 动画的渲染怪癖并且它有所帮助。

Answer 2

您运行遇到了 Firefox 最烦人的文本呈现属性之一。为了加速过渡动画，不渲染字体 "fully"，过早切断渲染路径，因此与过渡期间相比，字体在过渡前后呈现不同。

在 https://bugzilla.mozilla.org 上提交问题，以便 Mozilla 了解它，并且可以指出您已经在处理此错误的位置，或者可以开始从您的错误报告中跟踪此问题.

css 过渡时的字体干扰

Font disturbtion on css transition

css

firefox

fonts

css-transitions