使用css过渡不透明度时文本闪烁，并在moz中变换旋转

Question

我在moz中遇到问题（在webkit中工作）文本在悬停时闪烁。 请参阅此演示以获取示例： https://jsfiddle.net/1zy253vv/3/

我尝试添加translate3d（0,0,0）和backface-visibility：hidden，但没有任何效果。

＆＃13;

＆＃13;

div {
  background: cadetblue;
  width: 150px;
  height: 150px;
  top: 50%;
  right: 50%;
  position: absolute;
  cursor: pointer;
}

p {
  opacity: 0;
  display: inline-block;
  transition: opacity 0.3s;
  font-size: 50px;
  transform: rotate(-90deg) translate3d(0, 0, 0);
  backface-visibility: hidden;
}

div:hover p {
  opacity: 1;
}

＆＃13;

<div>
  <p>Saturn</p>
</div>

＆＃13;

＆＃13;

＆＃13;

有没有人有想法？

Answer 1

我通过在will-change: opacity;

上添加<p>来修复它

请参阅此示例：https://jsfiddle.net/1zy253vv/8/

p{
opacity: 0;
display: inline-block;
transition: opacity 0.3s;
font-size: 50px;
transform: rotate(-90deg) translate3d(0, 0, 0);
will-change: opacity;
}

will-change: transform;也适用

Answer 2

有趣的是，display:inline-block标记上的p似乎导致了问题。我不能确定为什么，也许别人知道。但是，为此换掉CSS;

p{
  opacity: 0;
  display: block;
  text-align: center;
  transition: opacity 0.3s;
  font-size: 50px;
  transform: rotate(-90deg);
}

似乎可以解决问题。在这里小提琴 - https://jsfiddle.net/1zy253vv/4/

更新 - Firefox版本44.0.2

同样注意 - 对于webkit，您需要重新引入3dtransform和文本修复。