可能的Firefox框-在没有父级背景的情况下转换转换后的元素-在背景下很平滑

Question

我遇到了这个奇怪的性能问题，据我所知，到目前为止，仅在FireFox中存在。

经过长时间的反复试验，我设法复制了该问题，因为我不知道问题来自何处。

我将其归结为以下事实：当转换后的元素的容器没有背景时，transform的过渡不会/实际上不会发生。

在这种情况下，它是一个已旋转45度的容器。同样，消除容器的旋转会固定滞后。但是，通过应用bacground或border，我已经设法保持旋转来消除滞后。这是firefox别名的臭名昭著的错误，在其中添加了border: 1px solid transparent会有所帮助吗？请注意，在这种情况下也应用黑色边框可以解决此问题。

可以比较问题的代码。

.cross-icon-container.new {
  height: 60px;
  width: 60px;
  transform: rotate(45deg);
  background: lightblue;
  overflow: hidden;
  position: relative;
}

.cross-icon {
  position: absolute;
  background: #000;
}

.part-one {
  left: 50%;
  width: 1px;
  height: 60px;
  transform: translate3d(0, -60px, 0);
  transition: transform .2s 0s linear;
}

.part-two {
  transform: translate3d(-60px, 0, 0);
  top: 50%;
  width: 60px;
  height: 1px;
  transition: transform .2s .2s linear;
}

.cross-icon-container.new:hover .cross-icon {
  transform: translate3d(0, 0, 0);
}

.cross-icon-container.new:hover .part-one {
  transition: transform .2s .2s linear;
}

.cross-icon-container.new:hover .part-two {
  transition: transform .2s 0s linear;
}
.cross-icon-container.new.no-bg{
  background:none!important;
  left: 100px;
top: 7px;
position: absolute;
}
p{margin-left: 100px}

<div class="cross-icon-container new">
  <div class="cross-icon part-one"></div>
  <div class="cross-icon part-two"></div>
</div>
<div class="cross-icon-container new no-bg">
  <div class="cross-icon part-one"></div>
  <div class="cross-icon part-two"></div>
</div>
<p>
Above
</p>