css - 定位粘性和刻度

同时使用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中，尚未测试其他浏览器。

编辑：这是问题的简短视频：



任何人都可以对此有所了解吗？

最佳答案

当我将鼠标悬停在链接上时，内容对于我来说并没有转移，因此我很难修复它。因此，我将比例转换更改为使用宽度转换。您能否让我知道您是否仍然看到内容的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>

关于css - 定位粘性和刻度，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/48249429/