HTML Modal在Chrome正常显示，Firefox无法打开的兼容问题求助

HTML代码在Chrome中运行正常，但Firefox里点击「See more」按钮触发Modal时失效。排查发现是Modal的position: fixed属性导致，改成relative后Firefox能正常显示，但会破坏其他组件样式，需要解决方案。

问题根源 #

Firefox中，当fixed定位元素的父容器设置了transform、filter或perspective属性时，fixed定位会失效，元素会相对于父容器而非视口定位。你的.card类设置了backdrop-filter: blur(10px)，这个属性触发了Firefox的渲染特性，导致Modal的fixed定位失效，无法正常显示在视口层级。

解决方案 #

把Modal元素从.card容器中移出，放到<body>的直接子层级下，这样Modal的fixed定位就不会受父容器的backdrop-filter影响。同时调整JS逻辑，让「See more」按钮对应到正确的Modal：

• 将所有Modal元素移到<body>末尾，给每个Modal添加唯一id标识
• 给每个「See more」按钮添加data-modal-id属性，关联对应Modal的id
• 修改JS逻辑，通过data-modal-id找到对应Modal并激活
• 保留Modal的position: fixed属性，确保原有样式不受影响

修改后的完整代码 #

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Popoup in javascript</title>
  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@48,400,0,0" />
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
      text-decoration: none;
      list-style: none;
      outline: none;
      font-family: 'system-ui', 'sans-serif';
      font-weight: 300;
      transition: .3s linear 0s all;
    }
    
    .container {
      position: relative;
      z-index: 1;
      display: flex;
      justify-content: left;
      align-items: left;
      flex-wrap: wrap;
      margin: 40px 0;
    }
    
    .container .card {
      position: relative;
      width: 300px;
      height: 400px;
      background: url(https://images.pexels.com/photos/3747155/pexels-photo-3747155.jpeg?auto=compress&cs=tinysrgb&w=600&lazy=load) no-repeat;
      background-size: cover;
      margin: 20px;
      box-shadow: 0 15px 35px rgba(0, 0, 0, 0.5);
      border-radius: 15px;
      display: flex;
      justify-content: center;
      align-items: center;
      backdrop-filter: blur(10px);
      overflow: hidden;
    }
    
    .container .card .content {
      position: relative;
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;
      transition: 0.5s;
    }
    
    .container .card:hover .contentBx {
      transform: translateY(-20px);
    }
    
    .container .card .content .contentBx h2 {
      color: #000000;
      text-transform: uppercase;
      letter-spacing: 2px;
      font-weight: 500;
      font-size: 18px;
      text-align: center;
      margin: 20px 0 10px;
      line-height: 1.1em;
    }
    
    .container .card .content .contentBx p {
      color: #ffffff;
      letter-spacing: 2px;
      font-weight: 500;
      font-size: 14px;
      text-align: left;
      margin: 20px 0 10px;
      line-height: 1.1em;
      padding-left: 15px;
    }
    
    .container .card .sci {
      position: absolute;
      bottom: 50px;
      display: flex;
    }
    
    .container .card .sci li {
      list-style: none;
      margin: 0 10px;
      transform: translateY(40px);
      transition: 0.5s;
      opacity: 0;
    }
    
    .container .card:hover .sci li {
      transform: translateY(0px);
      opacity: 1;
    }
    
    .container .card .sci li a {
      color: #000000;
      font-size: 20px;
    }
    
    .blur-filter {
      filter: blur(2px);
    }
  </style>
  <style>
    [modal] {
      opacity: 0;
      position: fixed;
      top: 120%;
      bottom: 0;
      left: 0;
      right: 0;
      color: white;
      background: #ffffff38;
      backdrop-filter: blur(10px);
      overflow: hidden;
      transition: 1s linear 0s all;
      z-index: 999;
    }
    
    [modal="active"] {
      opacity: 1;
      top: 0%;
    }
    
    [modal]>.modal {
      display: contents;
    }
    
    [modal]>.flexbox_column {
      margin: 0;
    }
    
    [modal]>.modal>.modal_header {
      display: grid;
      grid-template-columns: auto 24px;
      padding: 10px;
    }
    
    [modal]>.modal>.modal_header>h4 {
      font-weight: 500;
    }
    
    [modal]>.modal>.modal_header>._close {
      cursor: pointer;
    }
    
    [modal]>.modal>.modal_content {
      height: 100%;
      padding: 10px;
      border-radius: 16px;
      overflow: scroll;
    }
    
    [modal]>.modal>.modal_content::-webkit-scrollbar {
      width: 5px;
    }
    
    [modal]>.modal>.modal_content::-webkit-scrollbar-track {
      background: #e2e2e2;
    }
    
    [modal]>.modal>.modal_content::-webkit-scrollbar-thumb {
      background: #9a9a9a;
    }
    
    [modal]>.modal>.modal_content::-webkit-scrollbar-thumb:hover {
      background: #b6b6b6;
    }
    
    [modal]>.modal>.modal_content>img {
      max-width: 100%;
      object-fit: cover;
      filter: opacity(0.8);
    }
    
    [data-modal-id] {
      cursor: pointer;
    }
  </style>
</head>

<body>
  <div>
    <section>
      <div class="container">
        <!--CARD START-->
        <div class="card">
          <div class="content">
            <div class="contentBx">
              <h2>PR1</h2>
              <p>
                PR1 is a health related tracker..
                <a data-modal-id="modal-1">See more</a>
              </p>
            </div>
          </div>
        </div>
        <!--CARD END-->
        <!--CARD START-->
        <div class="card">
          <div class="content">
            <div class="contentBx">
              <h2>PR1</h2>
              <p>
                PR1 is a health related tracker..
                <a data-modal-id="modal-2">See more</a>
              </p>
            </div>
          </div>
        </div>
        <!--CARD END-->
      </div>
    </section>
  </div>

  <!-- MODALS MOVED TO BODY LEVEL -->
  <!--MODAL 1 START-->
  <div modal id="modal-1">
    <div class="modal flexbox_column">
      <div class="modal_header">
        <h4>MEGA DISCOUNT</h4><span onclick="closeModal(this)" class="_close material-symbols-outlined">expand_more</span></div>
      <div class="modal_content">
        <p>
          Lorem ipsum dolor sit amet. Qui repudiandae omnis eos illo numquam sit doloremque officiis ut sint modi sit nulla praesentium? Ut sunt natus non galisum dolor est omnis quae qui voluptatem atque? Ex excepturi natus aut tempore ipsum ea quia rerum non
          dolores nihil sed exercitationem autem! Est voluptas sint vel enim dolores ea voluptatem suscipit est dolorem ipsum sed recusandae corrupti. Cum perspiciatis nihil aut velit dignissimos aut temporibus itaque est molestias voluptatum qui sint voluptatem.
          Aut deleniti galisum ut quia quia quo voluptatem soluta et fugit dolores hic consectetur beatae. Ut cupiditate ipsum et doloribus optio et nisi omnis!
        </p>
        <p>
          Lorem ipsum dolor sit amet. Qui repudiandae omnis eos illo numquam sit doloremque officiis ut sint modi sit nulla praesentium? Ut sunt natus non galisum dolor est omnis quae qui voluptatem atque? Ex excepturi natus aut tempore ipsum ea quia rerum non
          dolores nihil sed exercitationem autem! Est voluptas sint vel enim dolores ea voluptatem suscipit est dolorem ipsum sed recusandae corrupti. Cum perspiciatis nihil aut velit dignissimos aut temporibus itaque est molestias voluptatum qui sint voluptatem.
          Aut deleniti galisum ut quia quia quo voluptatem soluta et fugit dolores hic consectetur beatae. Ut cupiditate ipsum et doloribus optio et nisi omnis!
        </p>
        <img src="https://images.pexels.com/photos/3756879/pexels-photo-3756879.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" alt="Free license from pexels" />
      </div>
    </div>
  </div>
  <!--MODAL 1 END-->

  <!--MODAL 2 START-->
  <div modal id="modal-2">
    <div class="modal flexbox_column">
      <div class="modal_header">
        <h4>DISCOUNT 50%</h4><span onclick="closeModal(this)" class="_close material-symbols-outlined">expand_more</span></div>
      <div class="modal_content">
        <p>
          Lorem ipsum dolor sit amet. Qui repudiandae omnis eos illo numquam sit doloremque officiis ut sint modi sit nulla praesentium? Ut sunt natus non galisum dolor est omnis quae qui voluptatem atque? Ex excepturi natus aut tempore ipsum ea quia rerum non
          dolores nihil sed exercitationem autem! Est voluptas sint vel enim dolores ea voluptatem suscipit est dolorem ipsum sed recusandae corrupti. Cum perspiciatis nihil aut velit dignissimos aut temporibus itaque est molestias voluptatum qui sint voluptatem.
          Aut deleniti galisum ut quia quia quo voluptatem soluta et fugit dolores hic consectetur beatae. Ut cupiditate ipsum et doloribus optio et nisi omnis!
        </p>
        <p>
          Lorem ipsum dolor sit amet. Qui repudiandae omnis eos illo numquam sit doloremque officiis ut sint modi sit nulla praesentium? Ut sunt natus non galisum dolor est omnis quae qui voluptatem atque? Ex excepturi natus aut tempore ipsum ea quia rerum non
          dolores nihil sed exercitationem autem! Est voluptas sint vel enim dolores ea voluptatem suscipit est dolorem ipsum sed recusandae corrupti. Cum perspiciatis nihil aut velit dignissimos aut temporibus itaque est molestias voluptatum qui sint voluptatem.
          Aut deleniti galisum ut quia quia quo voluptatem soluta et fugit dolores hic consectetur beatae. Ut cupiditate ipsum et doloribus optio et nisi omnis!
        </p>
        <img src="https://images.pexels.com/photos/3756879/pexels-photo-3756879.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" alt="Free license from pexels" />
      </div>
    </div>
  </div>
  <!--MODAL 2 END-->
</body>
<script>
  let modalLinks = document.querySelectorAll('a[data-modal-id]');
  modalLinks.forEach(link =>
    link.addEventListener('click', function() {
      const modalId = this.getAttribute('data-modal-id');
      const modal = document.getElementById(modalId);
      modal.setAttribute('modal', 'active');
    })
  );

  function closeModal(e) {
    const modal = e.closest('[modal]');
    modal.setAttribute('modal', '');
  }
</script>

</html>

内容的提问来源于stack exchange，提问作者Shankar Panda