位置:在 Microsoft Edge 中滚动时粘滞闪烁，但在其他浏览器中不闪烁

Question

我有一个导航栏，它延伸到我的页面，并在滚动时跟随视口position:sticky唯一真正值得发布的类(我相信(是.secondary-heading但我不想排除其他 scss 影响我的问题的可能性。

.secondary-heading {
// This is the class in question....
position: sticky;
z-index: 1000;
top: 0;
width: 100%;
// The remainder might not be necessary... 
.tab-bar {
height: 70px;
background-color: $white;
display: flex;
justify-content: space-between;
align-items: center;
padding: 25px;
&:not(.with-title) {
box-shadow: 0px 5px 5px -5px $medium-gray;
}
img {
margin-right: 20px;
}
>div {
a {
@include font-size(20);
padding: 0 15px;
color: $dark-gray;
position: relative;
top: -4px;
padding-bottom: 19px;
padding-top: 25px;
&:hover {
color: $sea-blue;
cursor: pointer;
}
&.active {
background-color: $standard-gray;              
color: white;
&:hover {
color: white;
cursor: initial;
}
}
}
}
}
.title-bar {
height: 70px;
background-color: $standard-gray;        
color: white;
@include font-size(30);
box-shadow: 0px 5px 5px -5px $medium-gray;
display: flex;
align-items: center;
span {
margin-left: 240px;
}
}
}

在 Chrome 和 Firefox 上，这种样式可以完美地工作，并且可以按预期滚动页面，但在 Edge 中，栏在滚动时会闪烁。 有没有办法设置样式，使栏不闪烁？

这是我的导航栏 HTML：

<div class="secondary-heading">
<div class="tab-bar" [class.with-title]="showTitleBar">
<div>
<a routerLink="#" i18n>Home</a>
<a routerLink="#" i18n>Link</a>
<a routerLink="#" i18n>Link</a>
</div>        
</div>
<div class="title-bar">
<span>{{ headerTitle }}</span>
</div>
</div>    

我正在使用版本控制：

Microsoft Edge 42.17134.1.0Microsoft EdgeHTML 17.17134

Answer 1

我的解决方案是在IE和Edge中使用position: fixed。 不理想，但我能够得到我想要的结果。 只是还在等Microsoft赶上...