Question

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

它可以在Chrome，Firefox和Opera中正常运行，但Safari显示出一种奇怪的行为。 According to the W3C：

转换的任何非计算值都会导致创建堆叠上下文和包含块。物体充当固定位置后代的包含块。

因此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来获得所需的跨浏览器行为。

Safari中的CSS转换和固定定位

1 个答案: