Search code examples
cssmagnific-popup

Background moving with overflow hidden

While working on a website I encountered the following problem. Magnific Popup (lightbox plugin) sets the HTML to overflow: hidden; while the lightbox is open, this prevents scrolling.

On my page I have a fixed header image:

.header {
background-image: url("http://placehold.it/1920x400");
height: 400px;
background-size: contain;
background-attachment: fixed;
}

When I open the lightbox the html is set to overflow: hidden; and the background image moves. Overflow: hidden; is causing the background to move.

I have no idea what casuses this behavior, I have tried the following things:

  • Magnific Popup also sets a margin-right on the html element to prevent the content from shifting, this doesnt work with the background.

  • Have tried setting overflow-y: scroll; while the lightbox is open, this also does not work.

  • Using background-origin or background-clip also doesn't seem to solve the problem.

I simplified my code and ended up with this Codepen, to see the background moving click the button.

Codepen: Link to codepen

Hope you will be able to help me,

Wouter

Edit:

I would like to solve the moving background without setting the overflow to auto. I don't like it when the scrollbar is visible when the lightbox is open.

Solution

  • Found a solution to this problem, this was posted in the css reddit:

    1. background-size: calc(100% - 17px) This is the first solution Codepen of first solution
    2. background-size: 100vw This is the second solution Codepen of second solution