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

Question

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

该算法是当用户将其鼠标指针移动到 Appear 菜单内容之一时，名为 .slate 的 div 下降。

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

我正在寻找一种解决方案来消除这种不需要的重新定位 除非不使用 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>

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

How to remove div re-positioning when zoom up? (shrink the browser)

html

javascript

css

transition

position

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

How to remove div re-positioning when zoom up? (shrink the browser)

html

javascript

css

transition

position

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