Как убрать div-позиционирование при увеличении? (уменьшить браузер)

Question

Я сделал простой ползунок, который отвечает на событие mouseenter.

Алгоритм заключается в том, что когда пользователь перемещает указатель мыши на одно из Appear содержимого меню, деление называется .slateвниз.

Моя проблема в Chrome или Opera, когда пользователь увеличивает масштаб с помощью CTRL + Mouse Wheel Up, .slate немного разливается и плавно возвращается вверх, в то время как Firefox этого не делает:

Я ищу решение для удаления этого нежелательного изменения положения , кроме случаев, когдаиспользуя transition.

Я пытался дать transition более динамично для решения проблемы.Добавьте transition при вводе мыши в Appear, удалите его при вводе мыши в Disappear.

Но этот не работал с другой новой проблемой.transition будет игнорироваться, когда я вигу мышью следующим образом:

Есть ли способы решить эту проблему?

CodePen: Оригинальный код / Попытка 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>