无法在Safari中单击元素

Question

我有一些div用户可以单击，然后它们展开以覆盖屏幕。这样，它们就变成固定位置。

所有功能在Safari浏览器的所有浏览器中均按预期运行。在Safari上打开div后，用户将无法单击div中的任何内容。我有一些按钮和链接，这些按钮和链接会将用户带到其他页面或关闭div，但其行为就像用户从未单击任何东西一样。

以下是链接：https://toucan-sam.firebaseapp.com/

任何见识都会受到赞赏。

我使用我认为是相关的代码在下面创建了一个代码段，但是该代码段实际上显示了预期的行为。

let $body = $('body');
let $introduction = $('#introduction');
let $sidebar = $('#sidebar');
let griffen = {
  viewportHeight: $introduction.height(),
  viewportWidth: $introduction.width(),
  preset: false,
  extrasVisible: false,
  projectVisible: false,
  projectOpening: false,
  projectClosing: false,
  mobileSize: 900,
};

let openProject = (project) => {
  'use strict';
  let open = () => {
    let containerPosition = project.article.offset().top - window.scrollY;
    let containerWidth = project.article.width();
    let containerHeight = project.article.height();
    project.container.css({
      'height': containerHeight + 'px',
      'position': 'fixed',
      'top': containerPosition + 'px',
      'width': containerWidth + 'px',
      'z-index': '100',
    });
    if (project.id === 'sdot') {
      project.heading.css({
        'background-position': 'center 25%',
      });
      project.header.animate({
        'padding-left': '0',
        'padding-top': '20%',
      }, 1000);
    } else {
      project.header.animate({
        'padding-left': '0',
      }, 1000);
    }
    project.container.animate({
      'height': '100vh',
      'top': '0',
      'width': '100%',
    }, 1000, () => {
      project.container.addClass('full');
      griffen.projectOpening = false;
    });
  };

  $body.addClass('stuck');
  $('html').addClass('stuck');
  project.tabButton.attr('aria-selected', 'true');
  project.content.attr('aria-hidden', 'false');
  let verticalPosition = project.article.offset().top - (griffen.viewportHeight / 2) + (project.article.height() / 2);
  let diff = Math.round(verticalPosition) - window.scrollY;
  console.log(diff);
  if (Math.abs(diff) > 50) {
    let doneScrolling = false;
    $('html, body').animate({
      'scrollTop': verticalPosition
    }, 500, () => {
      if (!doneScrolling) {
        doneScrolling = true;
        window.setTimeout(() => {
          open();
        }, 500);
      }
    });
  } else {
    open();
  }

};

let closeProject = (project) => {
  'use strict';
  let close = () => {
    let containerPosition = project.article.offset().top - window.scrollY;
    let containerWidth = project.article.width();
    let containerHeight = project.article.height();

    project.container.removeClass('full');
    project.container.animate({
      'height': containerHeight + 'px',
      'top': containerPosition + 'px',
      'width': containerWidth + 'px',
    }, 1000, () => {
      project.container.css({
        'height': '',
        'position': '',
        'top': '',
        'width': '',
        'z-index': '',
      });
      $body.removeClass('stuck');
      $('html').removeClass('stuck');
      griffen.projectClosing = false;
      griffen.projectVisible = false;
    });

    if (project.id === 'sdot') {
      project.heading.css({
        'background-position': '',
      });
      if (griffen.viewportWidth >= griffen.mobileSize) {
        project.header.animate({
          'padding-left': '250px',
          'padding-top': '0',
        }, 1000, () => {
          project.header.css({
            'padding-left': '',
            'padding-top': '',
          });
        });
      } else {
        project.header.animate({
          'padding-left': '0',
          'padding-top': '0',
        }, 1000, () => {
          project.header.css({
            'padding-left': '',
            'padding-top': '',
          });
        });
      }
    } else {
      if (griffen.viewportWidth >= griffen.mobileSize) {
        project.header.animate({
          'padding-left': '250px',
        }, 1000, () => {
          project.header.css({
            'padding-left': '',
          });
        });
      }
    }
  };

  if (project.container.scrollTop() !== 0) {
    project.container.animate({
      'scrollTop': 0,
    }, 500, () => {
      close();
    });
  } else {
    close();
  }
};

let toggleProject = (project) => {
  'use strict';
  if (griffen.projectVisible === false) {
    if (griffen.projectOpening === false && griffen.projectClosing === false) {
      griffen.projectOpening = true;
      griffen.projectVisible = true;
      openProject(project);
    }
  } else {
    if (griffen.projectOpening === false && griffen.projectClosing === false) {
      griffen.projectClosing = true;
      closeProject(project);
    }
  }
};


let inciteWater = {
  article: $('#incite-water'),
  container: $('#incite-water-container'),
  header: $('#incite-water-header'),
  heading: $('#incite-water-heading'),
  content: $('#incite-water-content'),
  tabButton: $('#incite-water-button'),
  id: 'incitewater',
};
console.log(inciteWater);
inciteWater.tabButton.click((e) => {
  'use strict';
  e.preventDefault();
  $('.project-link').attr('aria-selected', 'false');
  $('[role="tabpanel"]').attr('aria-hidden', 'true');
  toggleProject(inciteWater);
});

let $closeInciteWater = $('#close-incite-water-button');
$closeInciteWater.click((e) => {
  'use strict';
  e.preventDefault();
  $('.project-link').attr('aria-selected', 'false');
  $('[role="tabpanel"]').attr('aria-hidden', 'true');
  closeProject(inciteWater);
});

#introduction,
#sidebar {
  box-sizing: border-box;
  width: 100vw;
  height: 100vh;
  position: fixed;
  opacity: 0;
  z-index: -1;
}

.project,
.project-container {
  overflow: hidden;
  background-color: #fff
}

section>header {
  text-align: center
}

section p {
  font-size: 1.2em;
  font-weight: 400;
  line-height: 2;
  margin: 1em 0
}

.project-date,
.project-header {
  font-weight: 300;
  text-transform: uppercase
}

.image {
  font-size: 1em;
  font-style: italic;
  text-align: center
}

.icon,
.project-header {
  -webkit-box-align: center;
  display: -webkit-box
}

.project-content-title,
.project-header h3 {
  font-family: "Krona One", "IBM Plex Sans", "Hiragino Maru Gothic ProN", sans-serif;
  font-size: 1.6em
}

.project {
  background-size: cover;
  height: 40vh;
  min-height: 250px;
  position: relative;
  width: 100%
}

.project-container,
.project-container>header {
  height: 100%;
  position: relative;
  max-height: 100vh;
  width: 100%
}

.project-container {
  -webkit-overflow-scrolling: touch;
  right: 0
}

.project-container>header {
  overflow: hidden
}

.project-container.full .project-header,
.project-link {
  position: absolute
}

.project-container.full {
  /* overflow-x:hidden; */
  ;
  overflow-y: scroll
}

.project-link {
  clip: rect(auto, auto, auto, auto);
  bottom: 0;
  left: 0;
  right: 0;
  top: 0
}

.project-header {
  -ms-flex-align: center;
  align-items: center;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  color: #fff;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: reverse;
  -ms-flex-direction: column-reverse;
  flex-direction: column-reverse;
  height: 60vh;
  right: 0;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  max-height: 100vh;
  position: fixed;
  top: 50%;
  -webkit-transform: translate3d(0, -50%, 0);
  transform: translate3d(0, -50%, 0);
  -webkit-transition: .25s opacity, .25s visibility, .25s top;
  -o-transition: .25s opacity, .25s visibility, .25s top;
  transition: .25s opacity, .25s visibility, .25s top;
  width: 100%
}

#contact,
#contact-form {
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal
}

.project-header h3 {
  text-align: center
}

.project-pre-title {
  margin: 0 0 2em;
  position: relative
}

.project-pre-title::after {
  background-color: #fff;
  bottom: -1em;
  content: '';
  height: 1px;
  left: 50%;
  position: absolute;
  -webkit-transform: translate3d(-50%, 0, 0);
  transform: translate3d(-50%, 0, 0);
  width: 8em
}

.project-content {
  margin: 0 auto;
  max-width: 960px;
  padding: 2em;
  position: relative;
  z-index: 150;
}

.project-content-intro {
  margin-bottom: 2em
}

.project-content-title {
  text-transform: uppercase
}

.project-date {
  margin: .5em 0
}

.close-project-button-dang {
  cursor: pointer;
  position: absolute;
  right: 3em;
  top: 3em;
  width: 3em;
  height: 3em;
  background-image: url(../icons/cancel.svg);
  background-size: cover;
  opacity: 0;
  -webkit-transition: .5s opacity;
  -o-transition: .5s opacity;
  transition: .5s opacity
}

#incite-water-heading {
  background-image: url(https://toucan-sam.firebaseapp.com/assets/images/water-drops.jpeg);
  background-position: center;
  background-size: cover
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="introduction">
  INTRODUCTION
</div>
<div id="sidebar">
  SIDEBAR
</div>
<article class="project" id="incite-water">
  <div class="project-container" id="incite-water-container">
    <header id="incite-water-heading">
      <a href="#incite-water" tabindex="0" class="project-link" id="incite-water-button" role="tab" aria-controls="incite-water-content" data-project="inciteWater">
        <div class="project-header" id="incite-water-header">
          <h3>Incite Water</h3>
          <span class="project-pre-title">Web Design &amp; Development</span>
        </div>
      </a>
    </header>
    <div class="project-content" tabindex="0" id="incite-water-content" aria-hidden="true" role="tabpanel" aria-labelledby="incite-water-button">
      <div class="project-content-intro">
        <div class="project-content-title">Incite Water</div>
        <div class="project-date">October 2017 – March 2018</div>
      </div>
      <p>This year, for the <a href="https://foster.uw.edu/centers/buerk-ctr-entrepreneurship/entrepreneurship-competitions/eic/" target="_blank">Alaska Airlines Environmental Innovation Challenge</a>, I worked on a project called Incite Water. Our team
        was comprised of peers from various departments and the goal was to create a simple yet powerful interface that would encourage people to save water. We hoped to do this by demonstrating how much money people could personally save while mitigating
        the potential environmental impacts of wasting water.</p>
      <p>For this project, I worked as the sole web developer. I created the interface of the site as well as the background connections with our servers. In a small group, we programmed the “calculator” first using client-side JavaScript. I then implemented
        the calculation using Node.js to run server-side to protect some sensitive information from exposure and to allow for easier implementation with the Firebase platform used to host the project.</p>
      <p>My role went beyond web development and extended to providing direction for our technology-based decisions and assessing feasibility. I advised we use Google’s Firebase platform to take advantage the free low-traffic hosting and integration with
        various database structures and cloud computing functions that enabled the quick prototyping of the product.</p>
      <p>Though we chose to go with a high-fidelity prototype, it is still a prototype. We hoped that by presenting a more realized product to judges our vision would be more effectively conveyed. Because it is still an early prototype, we need to perform
        additional user research and usability testing to determine our next course of action. I anticipate further adjustments to our calculator as well as increased outreach and awareness campaigns to involve more members of the public.</p>
      <p><a href="https://incitewater.com/" target="_blank" class="button">Visit Incite Water</a></p>
      <a href="#" id="close-incite-water-button" class="close-project-button" data-project="inciteWater">← Return<span class="sr-only"> to the main page</span></a>
    </div>
  </div>
</article>