Firefox css过渡打破了JQuery属性的变化

Question

尝试使用jquery更改css属性时，Firefox不会显示生成的css转换。它在Chrome上工作正常。

SCSS

.wrap {
  width: 320px; border: 1px solid #ccc; 
  height: 480px; overflow: auto; 
  position: relative;
}
.top-header {
  position: fixed;
  top: 0; left: 0;
  width: 320px; height: 60px;
  .menu-icon {
    position: absolute; top: 0; right: 0;
    padding: 18px 20px;
  }
  .fix-search & {
    background: #eee;
  }
}

.search {
  position: absolute;
  top: 155px; left: 20px; right: 20px;
  input {
    width: 265px;
    border: 1px solid #ccc;
    padding: 8px;
    font-size: 15px;
    transition: width 0.2s;
    -webkit-appearance: none;
  }
  .fix-search & {
    position: fixed;
    top: 10px;
    input {
      width: 250px;
    }
  }
}

JS

var wrap = $("#wrap");

wrap.on("scroll", function(e) {

  if (this.scrollTop > 147) {
    wrap.addClass("fix-search");
  } else {
    wrap.removeClass("fix-search");
  }

});

CodePen链接复制了该问题。任何想法如何使转换在Firefox中工作？

请在此处查看CodePen。