仅在 Safari 中 - 位置：固定子级在父级为位置时被切断：固定且溢出：隐藏

Posted 2023-04-18

【中文标题】仅在 Safari 中 - 位置：固定子级在父级为位置时被切断：固定且溢出：隐藏

【英文标题】：Only in Safari - position:fixed child cut off when parent is position:fixed and overflow:hidden

【发布时间】：2014-12-29 13:23:33

【问题描述】：

我只在 Safari (6.1 os x) 中看到这个问题

当父元素设置为position:fixed; overflow:hidden，子元素设置为position:fixed，部分元素溢出父元素时，会被截断。

在 Chrome 和 Safari 中查看这个 jsfiddle 以了解我的意思：http://jsfiddle.net/y2dg65y7/3/

<div class="wrapper">
  <div class="inner">
    Why is cut off in Safari?       
  </div>
</div>

.wrapper 
  position: fixed;
  overflow: hidden;
  width: 200px;
  height: 400px;
  background-color: red;


.inner 
  position: fixed;
  top: 50px;
  left: 40px;
  width: 400px;
  height: 200px;
  padding: 20px;
  background-color: silver;

这是 Safari 中的错误吗？ 有任何想法吗？解决方法？

【问题讨论】：

似乎是 Safari 中的一个错误。固定位置始终是相对于视口的，因此绝不应该被父级截断。

Drat - 我想我会破解一些 .js 来破解它的工作。谢谢。

阅读此yuiblog.com/blog/2010/09/27/… 后，我不太确定我的其他评论是否正确。解决方法是给父母一个不同的position，但这取决于你想要实现的目标。

对于未来的 Google 员工来说，这仍然是一个悬而未决的问题。 翻白眼见bugs.webkit.org/show_bug.cgi?id=160953

2020 年更新：这仍然是一个悬而未决的问题。似乎 Safari 是新的 IE

【参考方案1】：

我在 macOS Catalina 10.15 上的 Safari 13.0.2 中找到了适合我的解决方案。

诀窍是将position: fixed 和overflow: hidden 拆分为两个div，如下所示：

<div class="wrapper">
  <div class="wrap2">
    <div class="inner">
        Great success in safari 13.0.2 on MacOS Catalina 10.15       
    </div>
  </div>
</div>

.wrapper
    background-color: red;
    padding: 40px;
    width: 200px;
    height: 400px;
    position: fixed;
    top: 0;
    left: 0;


.wrap2
  background-color: yellow;
  overflow: hidden;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;


.inner
    background-color: silver;
    padding: 20px;
    width: 400px;
    height: 200px;
    position: fixed !important;
    top: 50px;
    left: 40px;

还有一个 JS 小提琴：https://jsfiddle.net/jxmallett/gsyb326v/1/

编辑：确认这适用于 iPad 上 ios 12.3.1 上的 Safari。

【讨论】：

谢谢。这对我有用。我还发现了这个有趣的博客，它帮助我弄清楚了实际问题是什么miketaylr.com/posts/2015/06/position-fixed-overflow-hidden.html

分离位置：固定；和溢出：隐藏；成 2 个 div 在 Safari 中为我工作，谢谢！

【参考方案2】：

不确定这是否是您想要的，但这有效

溢出：可见；

.wrapper background-color: red; width: 200px; overflow: visible; height: 400px; position: fixed;

【讨论】：

如何解决？带有overflow: hidden 的元素不应隐藏带有position: fixed 的子元素。如果用户将元素设置为 overflow: hidden 是有原因的，而您是在告诉他删除它。