只有在Safari浏览器中，当父元素设置为position:fixed和overflow:hidden时，子元素设置为position:fixed时会被截断。

Question

我只在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 的一个错误吗？有什么想法？解决方法？

- Throne Creative

---

似乎是Safari的一个bug。固定位置始终相对于视口，因此不应该被父元素截断。 - alpipego

阅读完这篇文章后，我不太确定我的另一个评论是否正确。解决方法是给父元素设置不同的position，但这取决于你想要实现什么效果。 - alpipego

对于未来的谷歌用户，这仍然是一个待解决的问题。翻白眼请查看https：//bugs.webkit.org/show_bug.cgi?id=160953。 - sheng

2020 年更新：这仍然是一个未解决的问题。看起来 Safari 就像是新的 IE。 - David Voráč

2022年更新：Safari仍然在6年后存在问题：https://bugs.webkit.org/show_bug.cgi?id=160953 - Safari绝对是新的MSIE，不幸的是所有苹果移动客户都被迫使用这个有问题的浏览器！ - Mikko Rantalainen

Answer 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 fiddle：https://jsfiddle.net/jxmallett/gsyb326v/1/

编辑：在iPad上的iOS 12.3.1的Safari中确认可以使用。

- jxmallett

---

谢谢。这对我有用。我还发现了这篇有趣的博客，帮助我找出了实际问题所在 https://miketaylr.com/posts/2015/06/position-fixed-overflow-hidden.html - BoltCoder

将 position: fixed; 和 overflow: hidden; 分别放在两个 div 中，在 Safari 中对我有用，谢谢！ - David Voráč

这就是你要找的错误：https://bugs.webkit.org/show_bug.cgi?id=160953 - 我不认为它会很快被修复。自2016年以来，苹果公司已经意识到了这个错误，但它仍然没有被修复。 - Mikko Rantalainen

Answer 2

不确定这是否是您想要的，但这可以工作

overflow: visible;

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

- Daisy Smith

---

这怎么是解决方法呢？一个具有overflow: hidden属性的元素不应该隐藏带有position: fixed属性的子元素。如果用户将元素设置为overflow: hidden，肯定有理由，而你却告诉他要移除这个属性。 - Destal