Позиция: липкое мерцание во время прокрутки в Microsoft Edge, но не в других браузерах - PullRequest
Новая
       19

Позиция: липкое мерцание во время прокрутки в Microsoft Edge, но не в других браузерах

0 голосов
/ 18 октября 2018

У меня есть панель навигации, которая пересекает мои страницы и следует за окном просмотра при прокрутке с использованием 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-код для NavBar: 

<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

1 Ответ

0 голосов
/ 23 октября 2018

Моим решением было использовать position: fixed в IE, а также в Edge.Не идеально, но я смог получить результат, который искал.Просто все еще жду от Microsoft, чтобы наверстать упущенное ...

...