导航菜单hover/active时Dash元素抖动1像素的原因排查

问题描述 #

我开发了一个导航菜单，需求是鼠标悬停在选项上时，选项旁的Dash元素相应扩展，选中的菜单选项相对其他选项缩进并变色。目前功能基本符合预期，但Dash元素在transform变换时会向下抖动1像素。我把Dash设为独立元素以便单独拉伸，想问是不是Dash或hover的处理方式有误？

代码片段 #

HTML #

<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>

CSS #

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;
}

解决方案 #

抖动问题主要源于inline-block元素的基线对齐规则和transform缩放时的像素精度偏差，以下是针对性修复步骤：

• 修正.navLine的垂直对齐方式：
  inline-block元素默认以字体基线对齐，缩放时易因基线偏移产生抖动，添加vertical-align: middle强制垂直居中对齐：

  .navLine {
    /* 原有样式保留 */
    vertical-align: middle;
  }
  

• 调整transform原点为垂直中心：
  将.navLine的transform-origin从left改为left center，确保水平缩放时以元素垂直中线为基准，避免垂直方向位移：

  .navLine {
    /* 原有样式保留 */
    transform-origin: left center;
  }
  

• 统一导航文本的垂直居中基准：
  原代码中navContainer a的top:3px是固定偏移值，易和.navLine的字体高度不匹配。改用top:50% + transform: translateY(-50%)实现精准垂直居中，同时修改hover状态的transform为复合变换，保留垂直居中效果：

  .navContainer a {
    position: absolute;
    left: 50px;
    top: 50%;
    transform: translateY(-50%); /* 垂直居中 */
    /* 原有样式保留 */
  }
  
  .navContainer:hover a,
  .navContainer.active a {
    color: #E2E8F0;
    transform: translateY(-50%) translateX(38px); /* 复合变换，同时保留垂直居中 */
    transition: 0.2s;
  }
  

内容的提问来源于stack exchange，提问作者ClassicRanch