Fullpage.js中的Parallax.js在Mac Safari上创建意外结果

Question

我在我的fullpage.js幻灯片中使用parallax js。除了Mac Safari以外，它在其他任何地方都可以正常工作，这里它与图像重叠，同时滑动到下一张幻灯片，动画结束时，它又回到其位置。

检查下面的代码片段，您只能在Mac Safari上获取该错误。

我们可以以某种方式解决此错误吗？

// variables
var $header_top = $('.header-top');
var $nav = $('nav');



// toggle menu 
$header_top.find('a').on('click', function() {
  $(this).parent().toggleClass('open-menu');
});



// fullpage customization
$('#fullpage').fullpage({
  sectionsColor: ['#B8AE9C', '#348899', '#F2AE72', '#5C832F', '#B8B89F'],
  sectionSelector: '.vertical-scrolling',
  slideSelector: '.horizontal-scrolling',
  navigation: true,
  slidesNavigation: true,
  controlArrows: false,
  anchors: ['firstSection', 'secondSection', 'thirdSection', 'fourthSection', 'fifthSection'],
  menu: '#menu',

  afterLoad: function(anchorLink, index) {
    $header_top.css('background', 'rgba(0, 47, 77, .3)');
    $nav.css('background', 'rgba(0, 47, 77, .25)');
    if (index == 5) {
      $('#fp-nav').hide();
    }
  },

  onLeave: function(index, nextIndex, direction) {
    if (index == 5) {
      $('#fp-nav').show();
    }
  },

  afterSlideLoad: function(anchorLink, index, slideAnchor, slideIndex) {
    if (anchorLink == 'fifthSection' && slideIndex == 1) {
      $.fn.fullpage.setAllowScrolling(false, 'up');
      $header_top.css('background', 'transparent');
      $nav.css('background', 'transparent');
      $(this).css('background', '#374140');
      $(this).find('h2').css('color', 'white');
      $(this).find('h3').css('color', 'white');
      $(this).find('p').css({
        'color': '#DC3522',
        'opacity': 1,
        'transform': 'translateY(0)'
      });
    }
  },

  onSlideLeave: function(anchorLink, index, slideIndex, direction) {
    if (anchorLink == 'fifthSection' && slideIndex == 1) {
      $.fn.fullpage.setAllowScrolling(true, 'up');
      $header_top.css('background', 'rgba(0, 47, 77, .3)');
      $nav.css('background', 'rgba(0, 47, 77, .25)');
    }
  }
});


var scenes = [];
var scenesSelector = document.querySelectorAll('.scene');
for (i = 0; i < scenesSelector.length; i++) {
  scenes[i] = new Parallax(scenesSelector[i]);
}

@import url(https://fonts.googleapis.com/css?family=Alegreya+Sans:300,400,700);

/* ICON STYLES - ICON FROM: http://fontastic.me/
–––––––––––––––––––––––––––––––––––––––––––––––––– */

@font-face {
  font-family: "untitled-font-1";
  src: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/162656/untitled-font-1.eot");
  src: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/162656/untitled-font-1.eot#iefix") format("embedded-opentype"), url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/162656/untitled-font-1.woff") format("woff"), url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/162656/untitled-font-1.ttf") format("truetype"), url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/162656/untitled-font-1.svg#untitled-font-1") format("svg");
  font-weight: normal;
  font-style: normal;
}

[class^="icon-"]:after,
[class*=" icon-"]:after {
  font-family: "untitled-font-1";
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  speak: none;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.fp-tableCell{
  position: relative;
}
.icon-up-open-big {
  display: inline-block;
}

.icon-up-open-big:after {
  content: "a";
  font-size: 2.5em;
  display: block;
  -webkit-transform: rotateX(180deg);
  transform: rotateX(180deg);
  color: black;
  -webkit-transition: color .3s;
  transition: color .3s;
}

.icon-up-open-big:hover:after {
  color: white;
}

.scroll-icon {
  position: absolute;
  left: 50%;
  bottom: 30px;
  padding: 0 10px;
  -webkit-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  transform: translateX(-50%);
}


/* HELPER CLASSES
–––––––––––––––––––––––––––––––––––––––––––––––––– */

.clearfix:before,
.clearfix:after {
  content: "";
  display: table;
}

.clearfix:after {
  clear: both;
}

.l-left {
  float: left;
}

.l-right {
  float: right;
}

.end {
  margin-top: 30px;
  font-size: 3em;
  font-weight: bold;
  opacity: 0;
  -webkit-transform: translateY(300px);
  -ms-transform: translateY(300px);
  transform: translateY(300px);
  -webkit-transition: opacity, -webkit-transform 1s;
  transition: opacity, transform 1s;
  -webkit-transition-delay: 1s;
  transition-delay: 1s;
}


/* RESET-GENERAL STYLES
–––––––––––––––––––––––––––––––––––––––––––––––––– */

* {
  margin: 0;
  padding: 0;
  font-family: 'Alegreya Sans', Arial, sans-serif;
  text-transform: uppercase;
}

html {
  font-size: 62.5%;
}

body {
  color: black;
  letter-spacing: .18em;
}

a {
  text-decoration: none;
  color: white;
}

ul,
li {
  list-style-type: none;
}


/* NAV STYLES
–––––––––––––––––––––––––––––––––––––––––––––––––– */

.header-top {
  background: rgba(0, 47, 77, .3);
  height: 70px;
  padding: 0 10px;
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 12;
  box-sizing: border-box;
}

h1 {
  line-height: 70px;
  height: 70px;
}

h1 a {
  display: block;
  padding: 0 10px;
}

.toggle-menu {
  width: 50px;
  height: 50px;
  display: inline-block;
  position: relative;
  top: 10px;
}

.toggle-menu i {
  position: absolute;
  display: block;
  height: 2px;
  background: white;
  width: 30px;
  left: 10px;
  -webkit-transition: all .3s;
  transition: all .3s;
}

.toggle-menu i:nth-child(1) {
  top: 16px;
}

.toggle-menu i:nth-child(2) {
  top: 24px;
}

.toggle-menu i:nth-child(3) {
  top: 32px;
}

.open-menu i:nth-child(1) {
  top: 25px;
  -webkit-transform: rotateZ(45deg);
  transform: rotateZ(45deg);
}

.open-menu i:nth-child(2) {
  background: transparent;
}

.open-menu i:nth-child(3) {
  top: 25px;
  -webkit-transform: rotateZ(-45deg);
  transform: rotateZ(-45deg);
}

nav {
  height: 0;
  opacity: 0;
  box-sizing: border-box;
  background: rgba(0, 47, 77, .25);
  position: fixed;
  top: 70px;
  width: 100%;
  -webkit-transition: all 3s;
  transition: all 3s;
}

.open-menu~nav {
  opacity: 1;
  padding: 80px 0;
  z-index: 15;
  height: calc(90vh - 70px);
}

nav ul {
  padding: 0 10px;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
}

nav li {
  -webkit-box-flex: 1;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
}

nav li a {
  font-size: 2em;
  display: block;
  padding: 30px;
  text-align: center;
  -webkit-transition: background .3s;
  transition: background .3s;
}

nav li:nth-child(odd) a,
body.fp-viewing-fifthSection-1 #menu li:nth-child(5) a {
  background: #962D3E;
}

nav li:nth-child(even) a {
  background: #aa3346;
}

nav li:nth-child(odd) a:hover {
  background: #9e2f41;
}

nav li:nth-child(even) a:hover {
  background: #c53c52;
}

nav li.active a,
body.fp-viewing-fifthSection-1 #menu li:last-child a {
  background: #453659;
}

.col {
  position: absolute;
  width: 40%;
  background: #fff;
  height: 100vh;
  top: 0;
  left: 0;
  z-index: 2000;
  display: flex;
  align-items: center;
}

.img img {
  width: 100%;
}


/* SECTION STYLES - fullPage.js 
–––––––––––––––––––––––––––––––––––––––––––––––––– */

section {
  text-align: center;
  /*background: url('https://unsplash.it/1910/1221?image=626') no-repeat center / cover;*/
}

h2 {
  text-transform: lowercase;
  font-size: 4em;
  margin-bottom: 20px;
}

h3 {
  font-weight: 300;
  font-size: 2.8em;
}


/* SLIDENAV STYLES - fullPage.js 
–––––––––––––––––––––––––––––––––––––––––––––––––– */

#fp-nav ul li a span,
.fp-slidesNav ul li a span {
  background: white;
  width: 8px;
  height: 8px;
  margin: -4px 0 0 -4px;
}

#fp-nav ul li a.active span,
.fp-slidesNav ul li a.active span,
#fp-nav ul li:hover a.active span,
.fp-slidesNav ul li:hover a.active span {
  width: 16px;
  height: 16px;
  margin: -8px 0 0 -8px;
  background: transparent;
  box-sizing: border-box;
  border: 1px solid #24221F;
}


/* MQ STYLES
–––––––––––––––––––––––––––––––––––––––––––––––––– */

@media screen and (max-width: 767px) {
  nav ul {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
  }
  nav li {
    margin-top: 1px;
  }
  nav li a {
    font-size: 1.5em;
  }
  .scroll-icon {
    display: none;
  }
}

@media screen and (max-width: 400px) {
  html {
    font-size: 50%;
  }
  .open-menu~nav {
    padding: 20px 0;
  }
  nav li a {
    padding: 3px;
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/3.0.7/fullpage.extensions.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/parallax/3.1.0/parallax.min.js"></script>

<header>
  <div class="header-top clearfix">
    <h1 class="l-left"><a href="#firstSection">Your Logo</a></h1>
    <a class="l-right toggle-menu" href="#">
      <i></i>
      <i></i>
      <i></i>
    </a>
  </div>
</header>

<div id="fullpage">
  <section class="vertical-scrolling">
    <h2>fullPage.js</h2>
    <h3>This is the first section</h3>
    <div class="scroll-icon">
      <p>Jump into the last slide</p>
      <a href="#fifthSection/1" class="icon-up-open-big"></a>
    </div>
  </section>
  <section class="vertical-scrolling shadow">
    <h2>fullPage.js</h2>
    <h3>This is the second section</h3>
    <p class="img scene"><img data-depth="0.8" src="https://via.placeholder.com/350x150" alt=""></p>
    <div class="col">
      <h2>Column</h2>
    </div>
  </section>
  <section class="vertical-scrolling">
    <h2>fullPage.js</h2>
    <h3>This is the third section</h3>
  </section>
</div>

Answer 1

如果您要使用的视差库依赖于滚动事件或滚动位置，那么您将需要使用fullPage.js选项scrollBar:true。