javascript - Sticky Header Flickering on Safari Desktop Only When Anchor Scrolling

Question

I've built a website in Adobe Muse which has a sticky header that appears when scrolling past the logo. This works perfectly on Chrome and Firefox, even on iPad Safari, however, it does not work well on desktop Safari and flickers badly when clicking an anchor link which smoothly scrolls to the anchor.

Please see the example website below:

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

When clicking 'Contact Us' on Firefox/Chrome, the sticky header will look great throughout the smooth scroll. On Safari, it flickers on/off during the scrolling. Here's a GIF of the flickering effect:

Here's my code:

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');
    }
}

Please note, this isn't anything to do with the scrolling section of the JavaScript code (line 4) as I have removed this for testing and the issue persists.

I have tried a couple of CSS "fixes" on the sticky-bar ID such as -webkit-transform: translate3d(0,0,0) and -webkit-translateZ(0) but I've not had any luck. Could anybody please offer insight? Thank you.

Answer 1

position: fixed does not work well in ios is a know issue. Seem like it is not fixed till now. Setting translate3d(0,0,0) for element is a walk around but it is not perfect. It is still weird when you scroll. So my advice is using position: absolute instead. Just move your bar out of your content container, then give it position: absolute. See the code snipet below:

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>