当父元素从绝对更改为固定时，Firefox 中的小故障转换过渡答案

【问题标题】：Glitchy transform transition in Firefox when parent element changes from absolute to fixed当父元素从绝对更改为固定时，Firefox 中的小故障转换过渡
【发布时间】：2017-06-19 01:51:12
【问题描述】：

我环顾四周，但找不到其他人遇到类似情况。

正如标题所述，当父元素仅在 Firefox 中从绝对位置更改为固定位置时，我在转换转换中遇到了一个奇怪的“故障”（在 Chrome 中看起来完全没问题）。

我想我会把它扔在这里，以防万一有人以前找到了解决这个问题的方法。

操作系统：OS X El Capitan
火狐版本：51.0.1

Codepen：http://codepen.io/anon/pen/dNmJPK

HTML：

<div class="menu">
  <button id="btn-menu" type="button">
    <span class="menu-bars"></span>
  </button>
</div>

SCSS：

#btn-menu {
  position: absolute;
  z-index: 100;
  top: 50px;
  right: 30px;
  height: 49px;
  width: 49px;
  background-color: transparent;
  padding-left: 0;
  padding-right: 0;
  cursor: pointer;
  transition: .5s;
  transform: translate(0, -50%);
  border: 3px solid #000;
  border-radius: 10px;

  &:focus {
    outline: none;
  }

  .menu-open & {
    border-color: transparent;
    position: fixed;
  }

  .menu-bars {
    display: inline-block;
    position: relative;
    vertical-align: middle;
    width: 21px;
    height: 3px;
    background-color: #000;
    transition: .3s;

    &:before, &:after {
      content: "";
      display: block;
      position: absolute;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: #000;
      transition: .3s;
    }

    &:before {
      top: -10px;
      transform-origin: 0 0;
    }

    &:after {
      bottom: -10px;
      transform-origin: 0 100%;
    }

    .menu-open & {
      background-color: transparent;

      &:before {
        top: -7px;
        transform: rotate(45deg);
      }

      &:after {
        bottom: -7px;
        transform: rotate(-45deg);
      }
    }
  }
}

JQuery:

// Open/close menu
$('#btn-menu').on('click', function() {
  $('.menu').toggleClass('menu-open');
});

【问题讨论】：

你试过用transform: translate()替换top, left, right, bottom的所有转换吗？
@MichaelCoker 啊，我没试过，谢谢，我想我可以让它工作！
甜蜜的，np。是的 transform 获得 GPU 加速，但 top/left/right/bottom 没有。

标签： html css firefox

【解决方案1】：

感谢@MichaelCoker 提供使用变换而不是顶部、底部的解决方案。请参阅下面更新的 codepen。

http://codepen.io/anon/pen/xgWpQa

    &:before {
        transform: translate(0, -10px);
    }

    &:after {
        transform: translate(0, 10px);
    }

    .menu-open & {
        background-color: transparent;

        &:before {
            transform: rotate(45deg);
        }

        &:after {
            transform: rotate(-45deg);
        }
    }

【讨论】：