粘性 Header 仅当锚点滚动时才会在 Safari 桌面上闪烁

Question

我在 Adobe Muse 中建立了一个网站，它有一个粘性 header，滚动经过徽标时会出现。这在 Chrome 和 Firefox 上完美运行，甚至在 iPad Safari 上运行，但是，它在桌面 Safari 上运行不佳，并且在单击平滑滚动到锚点的锚点 link 时闪烁严重。

请参阅下面的示例网站：

http://mattstest03.businesscatalyst.com/index.html

在 Firefox/Chrome 上单击 'Contact Us' 时，粘性 header 在整个平滑滚动过程中看起来很棒。在 Safari 上，它在滚动期间闪烁 on/off。这是闪烁效果的 GIF：

这是我的代码：

CSS

#sticky-bar {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 53px;
    background: transparent url("assets/photoshop-eclipse.jpg") repeat left top;
}
/* Circle Logo */
#u73837 {
    width: 57px;
    transition: width 0.4s, height 0.4s;
    -moz-transition: width 0.4s, height 0.4s;
    -webkit-transition: width 0.4s, height 0.4s;
}
/* Text Logo */
#u56099 {
    width: 229px;
    transition: all 0.4s !important;
    -moz-transition: all 0.4s !important;
    -webkit-transition: all 0.4s !important;
}
/* Sticky Contact Us */
.sticky-contact {
    position: fixed !important;
    top: 9px !important;
    left: -160px !important;
    padding-bottom: 4px !important;
    margin-top: 0 !important;
    transition: all 0.4s;
    -moz-transition: all 0.4s;
    -webkit-transition: all 0.4s;
}
.sticky-contact:before {
    content: "We'd love to talk";
    position: absolute;
    left: calc(-100% - 30px);
    top: 8px;
    color: #eee;
    font-family: 'Raleway', 'Open Sans';
    font-size: 17px;
}
.contact-inner {
    margin-top: 4px !important;
    font-size: 17px !important;
    transition: all 0.4s;
    -moz-transition: all 0.4s;
    -webkit-transition: all 0.4s;
}
/* Circle Logo Transition */
.smaller-logo {
    position: fixed !important;
    top: 7px !important;
    width: 40px !important;
    height: 40px !important;
}
/* Normal Circle Logo */
.normal-logo {
    width: 57px;
    height: 57px;
}
/* Smaller Text */
.smaller-text {
    width: 0 !important;
}

JavaScript

var width = window.innerWidth;

if (width > 1000) {
    if (jQuery(window).scrollTop() > (jQuery('#u106240').offset().top - 15)) {
        // Fade in sticky bar
        jQuery('#sticky-bar').css('display', 'block');
        // Re-position 'Contact Us'
        jQuery('#buttonu206').addClass('sticky-contact');
        jQuery('#u200-4').addClass('contact-inner');
        // Hide logo text
        jQuery('#u56099').css('display', 'none');
        // Animate circle logo (CSS)
        jQuery('#u73837').removeClass('normal-logo');
        jQuery('#u73837').addClass('smaller-logo');
    } else {
        // Fade out sticky bar
        jQuery('#sticky-bar').css('display', 'none');
        // Re-position 'Contact Us'
        jQuery('#buttonu206').removeClass('sticky-contact');
        jQuery('#u200-4').removeClass('contact-inner');
        // Show logo text
        jQuery('#u56099').css('display', 'initial');
        // Animate circle logo (CSS)
        jQuery('#u73837').removeClass('smaller-logo');
        jQuery('#u73837').addClass('normal-logo');
    }
}

请注意，这与 JavaScript 代码（第 4 行）的滚动部分无关，因为我已将其删除以进行测试，但问题仍然存在。

我在 sticky-bar ID 上尝试了几个 CSS "fixes"，例如 -webkit-transform: translate3d(0,0,0) 和 -webkit-translateZ(0)，但我没有任何运气.有人可以提供见解吗？谢谢。

Answer 1

position: fixed不好用ios是一个know issue。好像到现在还没修好。为 element 设置 translate3d(0,0,0) 是一个绕圈子，但它并不完美。滚动时仍然很奇怪。所以我的建议是改用 position: absolute 。只需将您的栏移出您的内容容器，然后给它 position: absolute。请参阅下面的代码片段：

html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}

.fixed-bar {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 50px;
  background-color: #123;
  color: #FFF;
  text-align: center;
  line-height: 50px;
  z-index: 1;
}

.content {
  background-color: #ddd;
  color: #333;
  width: 100%;
  padding-top: 50px;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  overflow: auto;
}

.item {
  width: 100%;
  text-align: center;
  height: 200px;
  height: 30vh;
  padding-top: 10vh;
}

<div class="fixed-bar">
  I am a fixed bar
</div>
<div class="content">
  <div class="item">
    Your content goes here
  </div>
  <div class="item">
    Your content goes here
  </div>
  <div class="item">
    Your content goes here
  </div>
  <div class="item">
    Your content goes here
  </div>
  <div class="item">
    Your content goes here
  </div>
</div>

粘性 Header 仅当锚点滚动时才会在 Safari 桌面上闪烁

Sticky Header Flickering on Safari Desktop Only When Anchor Scrolling

javascript

css

safari

jquery

muse