Question

在这里，我简化了一个生产错误，用户无法滚动放置在对话框上的弹出窗口的内容。弹出窗口和对话框均固定在适当的z-index处。

底层（主体）包括通过3D变换创建的一些合成层。这将使叠加器对话框弹出并弹出到各个合成图层中。因此，它使弹出窗口不可滚动。

此代码段显示了弹出窗口如何以不可滚动的方式运行。相反，如果创建合成图层的transform: translateZ(0)被注释掉，或者调整了窗口大小以强制重新渲染，则弹出窗口将再次变为可滚动。

我在Edge / Windows，Chrome（70.0.3538.110）/ Windows＆Mac，Firefox / Mac上进行了测试。所有的Chrome都会遇到此“错误”。

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
    body {
      padding: 0;
      margin: 0;
    }

    #side {
      margin: 0;
      padding: 0;
      position: fixed;
      top: 0;
      bottom: 0;
      left: 0;
      width: 100px;
      overflow-x: hidden;
      overflow-y: auto;
      z-index: 4;
      background: blue;
      transform: translateZ(0);
    }

    #mask {
      position: fixed;
      top: 0;
      background-color: rgba(0, 0, 0, 0.7);
      width: 100%;
      height: 100%;
      overflow-y: auto;
      overflow-x: hidden;
      z-index: 1000;
    }

    #dialog {
      position: fixed;
      height: 400px;
      width: 400px;
      top: 50%;
      left: 50%;
      margin-left: -200px;
      margin-top: -200px;
      background-color: white;
      z-index: 1000;
      border: darkblue 1px solid;
    }

    @keyframes tooltip2In {
      from {
        opacity: 0;
      }

      to {
        opacity: 1;
      }
    }

    #popup-in-dialog {
      position: fixed;
      top: 10%;
      left: 32%;
      z-index: 1500;
      min-height: 22px;
      padding: 8px 12px;
      color: black;
      font-size: 12px;
      border-radius: 2px;
      max-width: 500px;
      animation: tooltip3In 0.2s linear;
      -webkit-animation: tooltip2In 0.2s linear;
      background-color: #666;
      border: gray 1px solid;
      width: 200px;
      padding: 6px 0;
      cursor: pointer;
      max-height: 352px;
      overflow-y: auto;
      background-color: #fff;
    }

    #popup-in-dialog li {
      line-height: 48px;
    }
  </style>
</head>

<body>
  <ol id="side">
    <script>
      var content = Array(99).fill(null).map((_, i) => `<li style="position:relative"><div style="position:absolute;z-index:10;"></div>${i}</li>`).join('')
      document.write(content)
    </script>
  </ol>
  <ol id="content">
    <script>
      var content = Array(200).fill(null).map((_, i) => `<li style="position:relative"><div style="position:absolute;z-index:10;"></div>${i}</li>`).join('')
      document.write(content)
    </script>
  </ol>
  <div id="modal-container">
    <div>
      <div id="mask">
      </div>
      <div id="dialog">
        <h1>Please select</h1>
      </div>
    </div>
    <div>
      <div id="popup-in-dialog">
        <ol id="select">
          <li>a</li>
          <li>b</li>
          <li>c</li>
          <li>d</li>
          <li>e</li>
          <li>f</li>
          <li>g</li>
          <li>h</li>
          <li>i</li>
        </ol>
      </div>
    </div>
  </div>
</body>
</html>

==更新== 附加了gif。

也许是Chrome的错误：鼠标滚轮无法在最上方的合成层上工作

0 个答案: