同时使用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中发生,尚未测试其他浏览器。
编辑:这是问题的简短视频:任何人都可以对此有所了解吗?
答案 0 :(得分: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>