绝对定位元素增加了巨大的空白

Question

我正在一个网站上工作：https://debifit.de，在 Chrome、FF 和 Edge 上一切正常。

但在 IE11 中，它会在底部添加巨大的白色 space，并且 - 如果您从 body 标签中删除 overflow:hidden - 也会添加到右侧。

经过数小时的研究，我发现导致这些问题的元素是 div#stickysmartphone，只要它具有位置：绝对。当 ScrollMagic.js 设置为 fixed 时，白色的 space 消失。它也比其他浏览器更靠右。

#stickysmartphone {
  position: absolute;
  right: 20%;
  top: 25em;
  bottom: 10px;
}

请帮我解决这两个问题，因为这个动画对用户体验很重要。

谢谢。

Answer 1

我想通了：在内联 svg 元素上设置 overflow: hidden 解决了这个问题。但是我发现在包含 div 上设置 position:fixed 改变了这一点非常奇怪。我猜这就是 IE11 的魔力。

Absolute positioned element adds huge white spaces