Search code examples
cssinternet-explorer-11

Absolute positioned element adds huge white spaces

I am working on a website: https://debifit.de and everything is fine on Chrome, FF and Edge.

But in IE11 it adds huge white space at the bottom and - if you remove overflow:hidden from the body tag - also to the right.

After hours of research I found that the element causing these issues is div#stickysmartphone, as long it has position: absolute. When ScrollMagic.js sets it to fixed, the white spaces disappear. It is also positioned more to the right than in the other browsers.

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

Please help me fix these two problems as this animation is essential to the UX.

Thank you.

Solution

  • I figured it out: setting overflow: hidden on the inline svg element solved the issue. But I find it very weird that setting position:fixed on the containing div changed that. That's IE11 magic I guess.