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

admin管理员组

文章数量:1390697

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:

.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.

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./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.

• javascript
• jquery
• css
• safari
• muse

Share Improve this question Follow edited Oct 5, 2017 at 11:00 asked Oct 2, 2017 at 16:02 user5762586user5762586 1

• Please let me know if this question wasn't asked well enough. I can provide further detail and explanation if required. Safari Desktop only, works on iOS Safari just fine. Only an issue when using the anchor which scrolls the page down - normal scrolling does not flicker the fixed bar. Thank you. – user5762586 Commented Oct 5, 2017 at 10:53

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 5 +100

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>

本文标签： javascriptSticky Header Flickering on Safari Desktop Only When Anchor ScrollingStack Overflow