Safari中的CSS转换和固定定位

Question

我遇到了固定定位,css转换容器和Safari的麻烦.当我在模态中单击项目时,我正在尝试显示下拉列表.模态有一个css transform.为了确保下拉列表始终显示在模态上,我将其定位为固定(我使用JS 计算left和top值).

它在Chrome,Firefox和Opera中的效果与预期相同,但Safari显示出一种奇怪的行为.根据W3C:

对于变换,除了none之外的任何计算值都会导致创建堆叠上下文和包含块.该对象充当固定定位后代的包含块.

因此,CSS转换容器中的固定元素应相对于此容器而不是视口定位.但似乎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。