html - 位置 : Sticky flickers during Scroll in Microsoft Edge, 但在其他浏览器中没有

Question

我有一个导航栏，当使用 position:sticky 滚动时，它会跨过我的页面并跟随视口(viewport)。唯一值得发布的类(我相信)是 .secondary-heading 但我不想排除其他 scs 影响我的问题的可能性。

.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 中，栏在滚动时会闪烁。有没有一种方法可以使它的样式不闪烁？

这是我的 NavBar 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.0 Microsoft EdgeHTML 17.17134

Answer 1

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