我在 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 行）无关，因为我已将其删除以进行测试，但问题仍然存在。
我已经在 ID 上尝试了几个 CSS“修复”，sticky-bar例如-webkit-transform: translate3d(0,0,0)，-webkit-translateZ(0)但我没有任何运气。有人可以提供见解吗？谢谢你。