为什么元素在悬停/活动时会坐立不安？

Question

我有一个导航菜单。当有人将鼠标悬停在其中一个选项上时，我希望该选项旁边的破折号相应地展开，以便所选菜单选项与其他选项相比缩进（并且颜色不同）。

我让它按照我想要的方式工作，除了在破折号的变换上它会出现一个像素故障。

html,
body {
  overflow: hidden;
  margin: 0;
  padding: 0;
  background-color: pink;
}

.container {
  position: relative;
  width: 100%;
  height: 100vh;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

#application-layer {
  position: relative;
  height: 100%;
  margin: 0;
  padding: 0;
}

rect:hover {
  fill: blue;
}

.menu {
  position: fixed;
  background-color: red;
  width: 300px;
  z-index: 100;
}

.hover:hover {
  background-color: orange;
}

#nav {
  /* position: absolute; */
  top: 150px;
  width: 500px;
}

.navContainer a {
  position: absolute;
  left: 50px;
  top: 3px;
  font: bold 12px 'Navigation';
  letter-spacing: 1.5px;
  text-decoration: none;
  color: #909eb2;
  transform-origin: left;
  transition: 0.2s;
  padding-top: 10px;
  padding-bottom: 10px;
}

.navLine {
  display: inline-block;
  width: fit-content;
  font: 14px 'Title';
  color: #909eb2;
  transition: 0.2s;
  transform-origin: left;
  padding-top: 10px;
  padding-bottom: 10px;
}

.navContainer {
  position: relative;
  width: 150px;
  cursor: default;
}

.navContainer:hover {
  display: block;
  cursor: pointer;
}

.navContainer:hover .navLine {
  color: #E2E8F0;
  transform: scale(2.25, 1);
  transition: 0.2s;
}

.navContainer:hover a {
  color: #E2E8F0;
  transform: translateX(38px);
  transition: 0.2s;
}

.navContainer.active a {
  color: #E2E8F0;
  transform: translateX(38px);
  transition: 0.2s;
}

.navContainer.active .navLine {
  color: #E2E8F0;
  transform: scale(2.25, 1);
  transition: 0.2s;
}

<div class="container">

  <div id="application-layer">
    <div class="menu">
      <aside class="navigator" id="nav">
        <nav>
          <div class="navContainer">
            <div class="navLine">——</div><a>FIRST</a>
          </div>
          <div class="navContainer">
            <div class="navLine">——</div><a>SECOND</a>
          </div>
          <div class="navContainer">
            <div class="navLine">——</div><a>THIRD</a>
          </div>
        </nav>
      </aside>
    </div>
  </div>
</div>

我是否错误地处理了破折号或悬停？对于破折号，我创建了一个单独的元素，这样我就可以将它与文本分开拉伸......

Answer 1

如果您谈论的是放大后可见的非常轻微的子像素变化，我猜这与 Chrome 处理子像素渲染的方式有关。据我所知，这在 Firefox 中并没有发生。

如果需要使用细线，您可以做的一件事是添加

translate3d(0, 0, 0) perspective(1px)

使其几乎不可见。由于某种原因，任何其他方法（例如我尝试强制 GPU 渲染的

will-change

）都不起作用，

font-smooth

也没有做任何事情。

html,
body {
  overflow: hidden;
  margin: 0;
  padding: 0;
  background-color: pink;
}

.container {
  position: relative;
  width: 100%;
  height: 100vh;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

#application-layer {
  position: relative;
  height: 100%;
  margin: 0;
  padding: 0;
}

rect:hover {
  fill: blue;
}

.menu {
  position: fixed;
  background-color: red;
  width: 300px;
  z-index: 100;
}

.hover:hover {
  background-color: orange;
}

#nav {
  /* position: absolute; */
  top: 150px;
  width: 500px;
}

.navContainer a {
  position: absolute;
  left: 50px;
  top: 3px;
  font: bold 12px 'Navigation';
  letter-spacing: 1.5px;
  text-decoration: none;
  color: #909eb2;
  transform-origin: left;
  transition: 0.2s;
  padding-top: 10px;
  padding-bottom: 10px;
}

.navLine {
  display: inline-block;
  width: fit-content;
  font: 14px 'Title';
  color: #909eb2;
  transition: 0.2s;
  transform-origin: left;
  padding-top: 10px;
  padding-bottom: 10px;
}

.navContainer {
  position: relative;
  width: 150px;
  cursor: default;
}

.navContainer:hover {
  display: block;
  cursor: pointer;
}


.navContainer:hover a {
  color: #E2E8F0;
  transform: translateX(38px);
  transition: 0.2s;
}

.navContainer.active a {
  color: #E2E8F0;
  transform: translateX(38px);
  transition: 0.2s;
}

.navContainer:hover .navLine {
  color: #E2E8F0;
  transform: scale(2.25, 1) translate3d(0, 0, 0) perspective(1px);
  transition: 0.2s;
}

.navContainer.active .navLine {
  color: #E2E8F0;
  transform: scale(2.25, 1) translate3d(0, 0, 0) perspective(1px);
  transition: 0.2s;
}

<div class="container">
  <div id="application-layer">
    <div class="menu">
      <aside class="navigator" id="nav">
        <nav>
          <div class="navContainer">
            <div class="navLine">——</div><a>FIRST</a>
          </div>
          <div class="navContainer">
            <div class="navLine">——</div><a>SECOND</a>
          </div>
          <div class="navContainer">
            <div class="navLine">——</div><a>THIRD</a>
          </div>
        </nav>
      </aside>
    </div>
  </div>
</div>