Search code examples
htmlcssoverflowmarginsmooth-scrolling

Issue with a strange margin on IE11 - overflow and smooth scroll might be related


I've got tiny problem with a website plenarto.github.io that bugs me for few last days.

Strange white margin appears on the right side of a website whenever you open it with IE11. It goes all through the website, from the bottom to the top. You can't target it with developer tools, nor add any border to it with:

* {
border: solid red 1px;
}

White margin causes the website to have additional horizontal scrollbar in the bottom.

Adding overflow-x: hidden to the html and body solves that issue, but then the problem with vertical scrolling appears (I suppose it might be connected with smooth scroll). When overflow-x: hidden is added, on IE the website can't be scrolled with a mouse wheel at all, and on Chrome all internal links stops working.

I've been trying to find any solution for that for a quite while...

Does anyone know what might be the cause of that strange margin and how to get rid of it without using overflow-x: hidden?

Thanks in advance for your time!


Solution

  • Your problem lies somewhere in #projects .main-container. If you add overflow: hidden to this div problem dissapears. Probably margin of one of projects item is overflowing.