css - 位置粘性和比例

Question

同时使用 position: sticky 和 transform: scale() 时遇到问题。

如果将鼠标悬停在左侧的图标上，您会注意到内容上下跳动了一个像素:

.scroll-spy {
  position: sticky;
  /*position: fixed;*/
  top: 10px;
}

.scroll-spy a {
  color: var(--dark);
}

.scroll-spy a:hover {
  text-decoration: none;
}

.scroll-spy a span {
  position: relative;
}

.scroll-spy a span:after {
  content: "";
  position: absolute;
  width: 100%;
  height: 1px;
  bottom: -2px;
  left: 0;
  background-color: var(--dark);
  visibility: hidden;
  transform: scale(0);
  transition: .25s linear;
}

.scroll-spy a:hover span:after {
  visibility: visible;
  transform: scale(.8);
}

.scroll-spy>div {
  margin-bottom: 20px;
}

.scroll-spy i {
  font-size: 20px;
  color: #e21414;
  transition: color .2s ease-in;
}

.scroll-spy .active i {
  color: #48c417;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />

<div class="row">
  <aside class="hidden-xs col-sm-2">
    <div class="scroll-spy text-center">
      <div class="scroll-spy-job-type">
        <a href="#job-type" class="active">
          <i class="fa fa-address-card"></i>
          <br />
          <span>Job type</span>
        </a>
      </div>
      <div class="scroll-spy-job-customer">
        <a href="#job-customer">
          <i class="fa fa-address-card"></i>
          <br />
          <span>Customer</span>
        </a>
      </div>
      <div class="scroll-spy-job-details">
        <a href="#job-details">
          <i class="fa fa-address-card"></i>
          <br />
          <span>Information</span>
        </a>
      </div>
    </div>
  </aside>
  <section class="col-xs-12 col-sm-10">
    <div class="add-edit-job-type" id="job-type">
      <h1>Job type</h1>

      <p>test</p>
      <p>test</p>
      <p>test</p>
      <p>test</p>
      <p>test</p>
      <p>test</p>
    </div>
    <div class="add-edit-job-customer" id="job-customer">
      <h1>Customer details</h1>

      <p>test</p>
      <p>test</p>
      <p>test</p>
      <p>test</p>
      <p>test</p>
      <p>test</p>
    </div>
    <div class="add-edit-job-information" id="job-details">
      <h1>Job information</h1>

      <p>test</p>
      <p>test</p>
      <p>test</p>
      <p>test</p>
      <p>test</p>
      <p>test</p>
    </div>
  </section>
</div>

我已经尝试添加 backface-visibility:hidden, transform-style: preserve-3d;, perspective: 1000px 没有改变。

适用于position: fixed。

发生在 Windows 10 上的 Chrome 中，尚未测试其他浏览器。

编辑:这里是问题的简短视频:

任何人都可以阐明这一点吗？

Answer 1

当我将鼠标悬停在链接上时，内容并没有发生变化，所以我很难解决这个问题。因此，我已将您的比例过渡更改为使用宽度过渡。如果您仍然看到内容的 1px 偏移，能否告诉我。

.scroll-spy {
  position: sticky;
  /*position: fixed;*/
  top: 10px;
}

.scroll-spy a {
  color: var(--dark);
}

.scroll-spy a:hover {
  text-decoration: none;
}

.scroll-spy a span {
  position: relative;
}

.scroll-spy a span:after {
  content: "";
  position: absolute;
  width: 0%;
  height: 1px;
  bottom: -2px;
  left: 50%;
  background-color: var(--dark);
  visibility: hidden;
  transition: .25s linear;
  transform:translateX(-50%);
}

.scroll-spy a:hover span:after {
  visibility: visible;
  width: 80%;
}

.scroll-spy>div {
  margin-bottom: 20px;
}

.scroll-spy i {
  font-size: 20px;
  color: #e21414;
  transition: color .2s ease-in;
}

.scroll-spy .active i {
  color: #48c417;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />

<div class="row">
  <aside class="hidden-xs col-sm-2">
    <div class="scroll-spy text-center">
      <div class="scroll-spy-job-type">
        <a href="#job-type" class="active">
          <i class="fa fa-address-card"></i>
          <br />
          <span>Job type</span>
        </a>
      </div>
      <div class="scroll-spy-job-customer">
        <a href="#job-customer">
          <i class="fa fa-address-card"></i>
          <br />
          <span>Customer</span>
        </a>
      </div>
      <div class="scroll-spy-job-details">
        <a href="#job-details">
          <i class="fa fa-address-card"></i>
          <br />
          <span>Information</span>
        </a>
      </div>
    </div>
  </aside>
  <section class="col-xs-12 col-sm-10">
    <div class="add-edit-job-type" id="job-type">
      <h1>Job type</h1>

      <p>test</p>
      <p>test</p>
      <p>test</p>
      <p>test</p>
      <p>test</p>
      <p>test</p>
    </div>
    <div class="add-edit-job-customer" id="job-customer">
      <h1>Customer details</h1>

      <p>test</p>
      <p>test</p>
      <p>test</p>
      <p>test</p>
      <p>test</p>
      <p>test</p>
    </div>
    <div class="add-edit-job-information" id="job-details">
      <h1>Job information</h1>

      <p>test</p>
      <p>test</p>
      <p>test</p>
      <p>test</p>
      <p>test</p>
      <p>test</p>
    </div>
  </section>
</div>