Липкий заголовок мерцает на рабочем столе Safari только при прокрутке привязки

Я создал веб-сайт в Adobe Muse с липким заголовком, который появляется при прокрутке логотипа. Это отлично работает в Chrome и Firefox, даже на iPad Safari, однако плохо работает в настольном Safari и плохо мерцает при нажатии на якорную ссылку, которая плавно прокручивается до якоря.

См. пример веб-сайта ниже:

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

При нажатии «Свяжитесь с нами» в Firefox/Chrome липкий заголовок будет отлично смотреться во время плавной прокрутки. В Safari он мигает во время прокрутки. Вот 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), так как я удалил его для тестирования, и проблема не устранена.

Я попробовал пару «исправлений» CSS для идентификатора sticky-bar, таких как -webkit-transform: translate3d(0,0,0) и -webkit-translateZ(0), но мне не повезло. Может ли кто-нибудь предложить понимание? Спасибо.


javascript jquery css safari muse
person Community    schedule 02.10.2017    source источник
comment
Пожалуйста, дайте мне знать, если этот вопрос был задан недостаточно хорошо. Я могу предоставить более подробную информацию и пояснения, если это необходимо. Только для рабочего стола Safari, отлично работает на iOS Safari. Только проблема при использовании привязки, которая прокручивает страницу вниз - при обычной прокрутке фиксированная полоса не мерцает. Спасибо.   -  person    schedule 05.10.2017

Ответы (1)


arrow_upward
3
arrow_downward

position: fixed плохо работает в ios, это известная проблема. Похоже, это не исправлено до сих пор. Установка 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>

person Duannx    schedule 06.10.2017
comment
Спасибо. Я посмотрю, как переделать это с position: absolute. - person ; 06.10.2017