固定位置在 Safari 版本 8.0.2 中不起作用

Question

我正在使用 angular 应用程序，我在 Twitter bootstrap 模态中。

我正在尝试使用固定位置将模态主体中存在的按钮重新定位到模态页脚。该按钮触发了当前模态主体范围独有的功能，无论滚动位置如何，我都需要它保持在视图中。模态页眉和模态页脚始终在视图中，模态主体溢出相应地在这些元素下滚动。

Chrome.

一切正常

我看到其他人在使用固定定位和 Safari 时遇到的多个问题，我尝试使用这些解决方法，包括：

-webkit-transform:translateZ(1px);

我还看到删除

transform: translate3d(0, 0, 0) ;

在某些情况下有所帮助，但该规则默认添加到 bootstrap 模态对话框中，删除它对我来说不是一个选项，因为当它被删除时有一长串不合适的元素.

除了这些尝试之外，我还尝试将按钮放置在具有绝对定位的父元素以及具有固定定位的父元素中，并且还尝试删除父元素并仅放置按钮本身，none 其中对我有用。

CSS:

.stickyBut{
   position: fixed;
   bottom: 16px;
   left: 605px;
   z-index: 999999;

   /* -webkit-transform:translateZ(10px); failed */ 
} 
.but-hold{
   z-index: 999999; 
   width: 100%;
   height: 25px;
   position: absolute; 
   /* position: fixed; */
   top: 0;
   left: 0;

  /* FAILED
  -webkit-transform:translateZ(1);
  */
}

HTML:

<div class="but-hold">
    <button class="btn btn-warning stickyBut" ng-click="submitProfile()">Save + Continue</button>
</div>

非常感谢任何其他解决方法或建议 - 非常感谢！

Answer 1

不幸的是，我从来没有用 CSS 解决过这个问题，相反，我不得不重新考虑并重建每个受到影响的模态的模态设计 - 删除所有固定定位的元素，复制内部结构标记中的每个模式而不是依赖 angular 为我做 -

经过进一步调查，我了解了有关 z-index 和堆叠上下文的新事实，可能是根本问题的原因

Every stacking context has a single HTML element as its root element. When a new stacking context is formed on an element, that stacking context confines all of its child elements to a particular place in the stacking order. That means that if an element is contained in a stacking context at the bottom of the stacking order, there is no way to get it to appear in front of another element in a different stacking context that is higher in the stacking order, even with a z-index of a billion! Phillip Walton Article

Answer 2

我遇到过类似的问题。将 position:fixed 应用于父级具有 transform 样式的子级将不会按预期运行。这是 webkit 中的错误。

要解决，请删除父级中的 transform 或将具有 transform 样式的元素移出父级。

这可能是 bootstrap 模态的情况。

固定位置在 Safari 版本 8.0.2 中不起作用

Position fixed not working in Safari Version 8.0.2

css

safari

twitter-bootstrap

angularjs