Javascript 无法在Safari中单击元素

我有一些div，用户可以点击，然后它们扩展到屏幕上。这样，它们就成为固定的位置

除了Safari之外，所有浏览器中的一切都与预期完全一致。在Safari上，一旦扩展了div，用户就无法单击div内的任何内容。我有一些按钮和链接，可以将用户带到其他页面或关闭div，但它的行为就像用户从未单击过任何内容一样

以下是一个链接：

如有任何见解，将不胜感激

我已经使用我认为相关的代码创建了下面的代码段，但该代码段实际上显示了预期的行为

let$body=$（'body'）；
让$introduction=$（“#introduction”）；
设$sidebar=$（“#sidebar”）；
让格里芬={
视口高度：$introduction.height（），
viewportWidth:$introduction.width（），
预设值：false，
外景：假，
projectVisible:false，
项目开始：错误，
项目结束：错误，
动员人数：900，
};
让openProject=（项目）=>{
"严格使用",；
让我们打开=（）=>{
让containerPosition=project.article.offset（）.top-window.scrollY；
让containerWidth=project.article.width（）；
让containerHeight=project.article.height（）；
project.container.css({
“高度”：容器高度+“px”，
'位置'：'固定'，
“顶部”：容器位置+“px”，
“宽度”：容器宽度+“px”，
“z指数”：“100”，
});
如果（project.id=='sdot'）{
project.heading.css({
“背景位置”：“中心25%”，
});
project.header.animate({
“左填充”：“0”，
“填充顶部”：“20%”，
}, 1000);
}否则{
project.header.animate({
“左填充”：“0”，
}, 1000);
}
project.container.animate({
“高度”：“100vh”，
“顶部”：“0”，
“宽度”：“100%”，
}, 1000, () => {
project.container.addClass（'full'）；
griffen.projectOpening=false；
});
};
$body.addClass（'stacked'）；
$（'html'）.addClass（'stack'）；
project.tabButton.attr（'aria-selected'，'true'）；
project.content.attr（'aria-hidden'，'false'）；
设verticalPosition=project.article.offset（）.top-（griffen.viewportHeight/2）+（project.article.height（）/2）；
让diff=Math.round（垂直位置）-window.scrollY；
控制台日志（diff）；
如果（数学绝对值（差值）>50）{
让doneScrolling=false；
$（'html，body'）。设置动画({
“scrollTop”：垂直位置
}, 500, () => {
如果（！完成滚动）{
doneScrolling=true；
window.setTimeout（（）=>{
open（）；
}, 500);
}
});
}否则{
open（）；
}
};
让closeProject=（项目）=>{
"严格使用",；
让关闭=（）=>{
让containerPosition=project.article.offset（）.top-window.scrollY；
让containerWidth=project.article.width（）；
让containerHeight=project.article.height（）；
project.container.removeClass（'full'）；
project.container.animate({
“高度”：容器高度+“px”，
“顶部”：容器位置+“px”，
“宽度”：容器宽度+“px”，
}, 1000, () => {
project.container.css({
“高度”：“，
“位置”：“，
“顶部”：“，
“宽度”：“，
“z指数”：“，
});
$body.removeClass（'stacked'）；
$（'html'）.removeClass（'stack'）；
griffen.projectClosing=false；
griffen.projectVisible=false；
});
如果（project.id=='sdot'）{
project.heading.css({
“背景位置”：“，
});
if（griffen.viewportWidth>=griffen.mobileSize）{
project.header.animate({
“左填充”：“250px”，
“padding top”：“0”，
}, 1000, () => {
project.header.css({
“左填充”：“，
“填充顶部”：“，
});
});
}否则{
project.header.animate({
“左填充”：“0”，
“padding top”：“0”，
}, 1000, () => {
project.header.css({
“左填充”：“，
“填充顶部”：“，
});
});
}
}否则{
if（griffen.viewportWidth>=griffen.mobileSize）{
project.header.animate({
“左填充”：“250px”，
}, 1000, () => {
project.header.css({
“左填充”：“，
});
});
}
}
};
if（project.container.scrollTop（）！==0）{
project.container.animate({
“scrollTop”：0，
}, 500, () => {
close（）；
});
}否则{
close（）；
}
};
让toggleProject=（项目）=>{
"严格使用",；
if（griffen.projectVisible==false）{
if（griffen.projectOpening==false&&griffen.projectClosing==false）{
griffen.projectOpening=true；
griffen.projectVisible=true；
openProject（项目）；
}
}否则{
if（griffen.projectOpening==false&&griffen.projectClosing==false）{
griffen.projectClosing=true；
关闭项目（项目）；
}
}
};
让水来={
第条：$（“#煽动水”），
容器：$（“#煽动水容器”），
标题：$（“#煽动水标题”），
标题：$（“#煽动水标题”），
含量：$（“#刺激水分含量”），
tabButton:$（“#煽动水按钮”），
id:“水”，
};
控制台.日志（水）；
单击（（e）=>{
"严格使用",；
e、 预防默认值（）；
$（'.project link'）.attr（'aria-selected'，'false'）；
$（'[role=“tabpanel”]'）。attr（'aria-hidden'，'true'）；
切换项目（水）；
});
让$CloseInjectWater=$（“#关闭煽动水按钮”）；
$closewater。单击（（e）=>{
"严格使用",；
e、 预防默认值（）；
$（'.project link'）.attr（'aria-selected'，'false'）；
$（'[role=“tabpanel”]'）。attr（'aria-hidden'，'true'）；
关闭项目（水）；
});
#简介，
#边栏{
框大小：边框框；
宽度：100vw；
高度：100vh；
位置：固定；
不透明度：0；
z指数：-1；
}
项目
.项目容器{
溢出：隐藏；