无法在 Safari 上检查轮播选择器中的标签，适用于 Chrome

Question

我目前正在开发一个个人网站，并针对其他浏览器体验进行优化。在 Safari 中尝试我的 #projects 部分时，我注意到我无法单击来循环浏览我当前列出的其他几个项目。光标也不会变为指针。我尝试弄乱不同项目元素的 Z-index，并且还向项目/项目列表元素添加了 -webkit-transform-style:preserve3d 属性，但还没有任何效果。

Chrome 中一切都完美运行。我还没有在其他浏览器中尝试过。请随时在 https://vayman.co/

查看此行为

这是我的项目部分：

<div id="projects">
      <div id="projects-anchor" style="position: relative; top: -30px"></div>
      <div class="container">
        <h1 class="sub-title">Projects</h1>
        <input type="radio" name="slider" id="s1">
        <input type="radio" name="slider" id="s2" checked>
        <input type="radio" name="slider" id="s3">
        <div class="project-list">
          <label for="s1" id="slide1" onclick="">
            <div class="project">
              <div class="cover"></div>
              <img class="static" src="assets/img/website-project-1.png" height="100%">
              <img class="active" src="assets/img/website-project.gif" height="100%">
              <div class="layer">
                <h3>This Website</h3>
                <h4><em>Web Development</em></h4>
                <p>It took me way too long to design that background.
                </p>
                <a href="https://vayman.co" target="_blank">
                  <i class="fa-solid fa-arrow-up-right-from-square fa-2xl"></i>
                </a>
                <div class="frameworks">
                  <img src="assets/img/html.png" alt="HTML">
                  <img src="assets/img/css.png" alt="CSS">
                  <img src="assets/img/nodejs.png" alt="Node JS">
                </div>
              </div>
            </div>
          </label>
          <label for="s2" id="slide2" onclick="">
            <div class="project">
              <div class="cover"></div>
              <img class="static" src="assets/img/navigator-project-1.png" height="100%">
              <img class="active" src="assets/img/navigator-project.gif" height="100%">
              <div class="layer">
                <h3>Navigator</h3>
                <h4><em>Autonomous Driving</em></h4>
                <p>The beefy brain behind our beautiful GEM&reg; e6 Electric Shuttle, built entirely from scratch by undergrads. 
                  We've equipped it with industry-leading localization, perception, object detection, prediction, motion planning, and control systems.
                  <br><br><em>Outside of broad development, I've contributed in large to our perception, object detection, control,
                  and embedded systems, as well as infrastructure maintenance.</em>
                </p>
                <a href="https://nova-utd.github.io/navigator/" target="_blank">
                  <i class="fa-solid fa-arrow-up-right-from-square fa-2xl"></i>
                </a>
                <div class="frameworks">
                  <img src="assets/img/c++.png" alt="C++">
                  <img src="assets/img/python.png" alt="Python">
                  <img src="assets/img/ros.png" alt="ROS 2">
                  <img src="assets/img/tensorflow.png" alt="TensorFlow">
                  <img src="assets/img/PyTorch.png" alt="PyTorch">
                  <img src="assets/img/numpy.png" alt="Numpy">
                  <img src="assets/img/scipy.png" alt="Scipy">
                  <img src="assets/img/docker.png" alt="Docker">
                  <img src="assets/img/OpenCV.png" alt="OpenCV">
                  <img src="assets/img/Cmake.png" alt="Cmake">
                  <img src="assets/img/ubuntu.png" alt="Ubuntu Linux">
                  <img src="assets/img/carla.png" alt="Carla simulator">
                </div>
              </div>
            </div>
          </label>
          <label for="s3" id="slide3" onclick="">
            <div class="project">
              <img src="assets/img/gray.jpg">
              <div class="layer">
                <h3>Coming Soon...</h3>
                <p>super cool and awesome AI project
                </p>
              </div>
            </div>
          </label>
        </div>
      </div>
    </div>


--------CSS-----------


#projects{
    /* padding-top: 480px; */
    padding-top: 5%;
    padding-left: 4%;
    padding-right: 4%;
    color: #ffffff;
}

#projects h1{
    position: relative;
}

#projects p{
    font-size: 1.15rem;
}

#projects a{
    z-index: 4;
}

#projects input{
    display: none;
}

#s1:checked ~ .project-list #slide2,
#s2:checked ~ .project-list #slide3,
#s3:checked ~ .project-list #slide1{
    filter: drop-shadow(0 0 3rem rgb(0, 0, 0));
    transform: translate3d(40%, 0, -5rem);
}

#s1:checked ~ .project-list #slide2 .cover,
#s2:checked ~ .project-list #slide3 .cover,
#s3:checked ~ .project-list #slide1 .cover{
    opacity: .3;
}

#s1:checked ~ .project-list #slide3,
#s2:checked ~ .project-list #slide1,
#s3:checked ~ .project-list #slide2{
    filter: drop-shadow(0 0 3rem rgb(0, 0, 0));
    transform: translate3d(-40%, 0, -5rem);
}

#s1:checked ~ .project-list #slide3 .cover,
#s2:checked ~ .project-list #slide1 .cover,
#s3:checked ~ .project-list #slide2 .cover{
    opacity: .3;
}

#s1:checked ~ .project-list #slide1,
#s2:checked ~ .project-list #slide2,
#s3:checked ~ .project-list #slide3{
    filter: drop-shadow(0 0 1rem rgb(0, 0, 0));
    transform: translate3d(0%, 0, 0);
}

#s1:checked ~ .project-list #slide1 .cover,
#s2:checked ~ .project-list #slide2 .cover,
#s3:checked ~ .project-list #slide3 .cover{
    opacity: 0;
}

#projects .container{
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    transform-style: preserve-3d;
    flex-direction: column;
    margin-bottom: 4rem;
}

.project-list{
    position: relative;
    height: 40vw;
    width: 30vw;
    margin-top: 1rem;
    perspective: 50rem;
    transform-style: preserve-3d;
    display: flex;
}

.project-list label{
    position: absolute;
    flex: 0 0 18rem;
    left: 0;
    right: 0;
    margin: auto;
    cursor: pointer;
    transition: transform .5s ease;
}

.project{
    border-radius: 2.5vw;
    position: relative;
    overflow: hidden;
    background-color: #000000;
    height: 40vw;
    outline: .1125vw solid #ffffff;
}


.project img{
    width: 100%;
    border-radius: 1.875vw;
    display: block;
    transition: transform .5s, opacity .5s;
}

.cover{
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: #000000;
    z-index: 4;
    transition: opacity .25s;
}

.layer{
    width: 100%;
    height: 0;
    background: linear-gradient(rgba(0,0,0,0.6), #6a00ffbd);
    border-radius: .625vw;
    position: absolute;
    left: 0;
    bottom: 0;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    padding: 0 2.5vw;
    text-align: center;
    font-size: .875rem;
    transition: height .35s;
}

.layer h3{
    font-weight: 800;
    font-size: 2rem;
}

.layer h4{
    font-weight: 400;
    font-size: 1.5rem;
}

.layer a{
    font-size: .625rem;
    margin-top: .625vw;
    text-decoration: none;
    line-height: 3.75rem;
    color: #6a00ff;
    background: #ffffff;
    width: 3.75rem;
    height: 3.75rem;
    border-radius: 50%;
    text-align: center;
}

.frameworks{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    margin-top: 1.25vw;
    width: 80%;
    height: auto;
}

.frameworks img{
    width: 3.875vw;
    margin-right: 1vw;
    margin-bottom: .5vw;
    border-radius: 0px;
    filter: drop-shadow(0 0 1vw rgba(0, 0, 0, 0.5));
}

.project:hover img{
    transform: scale(1.05);
}

.project:hover .layer{
    height: 100%;
}

.static {
    position:absolute;
    background: white;
  }

.static:hover {
    opacity:0;
}

这仍然是一项正在进行的工作，许多资产/参数需要优化，但我感谢任何伸出援助之手的人！对网络开发非常陌生。