放大时如何删除div重新定位？ （缩小浏览器）

Question

我制作了一个简单的滑块来响应mouseenter 事件。

算法是，如果用户将鼠标指针移动到Appear 菜单内容之一，则名为.slate 的div 会下降。

我的问题是在 Chrome 或 Opera 中，当用户使用 CTRL + Mouse Wheel Up 放大时，.slate 会溢出一点并顺利恢复，而 Firefox 则不会：

我正在寻找一种解决方案来消除这种不需要的重新定位除了不使用transition。

我尝试更动态地提供transition 以解决问题。鼠标进入Appear时添加transition，鼠标进入Disappear时删除。

但是这个问题不适用于另一个新问题。当我像这样摇动鼠标时，transition 将被忽略：

有没有办法解决这个问题？

代码笔：Original Code / Attempt 2

片段（原文）：

'use strict';
class Slate {
  constructor(header) {
    this.header = document.querySelector(header);
    this.slate = document.querySelector('.slate');
    this.menu = this.header.querySelector('.menu');
    this.contents = this.menu.querySelectorAll('.contents');
    this.addEvent();
  }
  addEvent() {
    this.contents.forEach((cur, idx) => {
      cur.addEventListener('mouseenter', (e) => this.expand(e, idx));
    })
  }
  expand(e, index) {
    let lesser = (index < 2),
        ternary = {
          toggle: (lesser) ? this.slate.classList.add('toggle') : this.slate.classList.remove('toggle')
        };
  }
}
const proSlate = new Slate('header');

      * {
        margin: 0;
        padding: 0;
        font-family: Helvetica;
      }
      div, section, header {
        position: relative;
      }
      ul, li {
        list-style-type: none;
      }
      header, .slate {
        width: 800px;
      }
      header {
        height: 100px;
        line-height: 100px;
        background-color: rgba(69, 255, 0, .4);
      }
      .slate {
        height: 400px;
        line-height: 400px;
        text-align: center;
        color: white;
        background-color: steelblue;
        top: -25rem;
        transition: top 500ms cubic-bezier(0.455, 0.03, 0.515, 0.955);
        z-index: -1;
        font-size: 4rem;
      }
      .menu {
        width: 100%;
        display: flex;
      }
      .contents {
        margin: 0 20px;
      }
      .toggle {
        top: 0;
      }

    <header>
      <ul class="menu">
        <li class="contents">Appear</li>
        <li class="contents">Appear</li>
        <li class="contents">Disapper</li>
        <li class="contents">Disapper</li>
      </ul>
    </header>
    <div class="slate">
      CONTEXT OF SLATE
    </div>

Answer 1

不要使用top，而是使用transform

'use strict';
class Slate {
  constructor(header) {
    this.header = document.querySelector(header);
    this.slate = document.querySelector('.slate');
    this.menu = this.header.querySelector('.menu');
    this.contents = this.menu.querySelectorAll('.contents');
    this.addEvent();
  }
  addEvent() {
    this.contents.forEach((cur, idx) => {
      cur.addEventListener('mouseenter', (e) => this.expand(e, idx));
    })
  }
  expand(e, index) {
    let lesser = (index < 2),
      ternary = {
        toggle: (lesser) ? this.slate.classList.add('toggle') : this.slate.classList.remove('toggle')
      };
  }
}
const proSlate = new Slate('header');

* {
  margin: 0;
  padding: 0;
  font-family: Helvetica;
}

div,
section,
header {
  position: relative;
}

ul,
li {
  list-style-type: none;
}

header,
.slate {
  width: 800px;
}

header {
  height: 100px;
  line-height: 100px;
  background-color: rgba(69, 255, 0, .4);
}

.slate {
  height: 400px;
  line-height: 400px;
  text-align: center;
  color: white;
  background-color: steelblue;
  transform: translateY(-100%);
  transition: transform 500ms cubic-bezier(0.455, 0.03, 0.515, 0.955);
  z-index: -1;
  font-size: 4rem;
}

.menu {
  width: 100%;
  display: flex;
}

.contents {
  margin: 0 20px;
}

.toggle {
  transform: translateY(0);
}

<header>
  <ul class="menu">
    <li class="contents">Appear</li>
    <li class="contents">Appear</li>
    <li class="contents">Disapper</li>
    <li class="contents">Disapper</li>
  </ul>
</header>
<div class="slate">
  CONTEXT OF SLATE
</div>