Safari 中的 CSS 变换和固定定位

Question

我在固定定位、css 转换容器和 Safari 方面遇到了麻烦。当我在模式中单击一个元素时，我试图显示一个下拉列表。模态带有一个 css transform。为了确保下拉列表始终显示在模式上，我将其定位为固定(我使用 JS 计算 left 和 top 值)。

它在 Chrome、Firefox 和 Opera 中按预期工作，但 Safari 显示奇怪的行为。 According to the W3C :

Any computed value other than none for the transform results in the creation of both a stacking context and a containing block. The object acts as a containing block for fixed positioned descendants.

因此 CSS 转换容器内的固定元素应该相对于此容器而不是视口(viewport)定位。但是 Safari 似乎不是这样的。看这个例子:

$(document).ready(function() {
  $(".show-liste").click(function() {
    $(".liste").show();
  });
});

.modale {
  height: 50px;
  overflow-y: scroll;
  transform: translate(100px);
}

ul {
  position: fixed;
  left: 0px;
  top: 0px;
}



/* --- Purely style related stuff ---- */

body {
  font-size: 80%;
}
.modale {
  position: absolute;
  top: 50px;
  padding: 60px;
  background-color: white;
  border: 1px solid #ccc;
  box-shadow: 2px 2px 2px #ddd;
}
button {
  width: 200px;
}
ul {
  list-style-type: none;
  margin-top: 0;
  padding-left: 0;
  width: 200px;
  display: none;
  box-shadow: 2px 2px 2px #ddd;
}
li {
  background: white;
  padding: 10px 20px;
  border: 1px solid #eee;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="modale">
  <div class="row">
    <div>
      <button class="show-liste">Open dropdown</button>
      <ul class="liste">
        <li>Choice 1</li>
        <li>Choice 2</li>
        <li>Choice 3</li>
        <li>Choice 4</li>
        <li>Choice 5</li>
      </ul>
    </div>
  </div>
</div>

你知道如何解决这个问题吗？任何 polyfill，有什么办法可以解决这个问题？使用绝对定位是我想避免的解决方案，因为它意味着在文档的主体级别移动列表，然后处理它的创建/销毁、附加模型(我使用的是 AngularJS)、事件等。这真的我最后的选择。

Answer 1

我相信您可以通过使用 position:absolute 而不是 position:fixed 来获得所需的跨浏览器行为。