Modal fixed position content shift

Question

After a lot of research, I am unable to find a proper solution for the shifting to the right of fixed positioned elements, cover images, and standard content, when a modal window is open.

Note: I am looking for a general, clean solution, not an hardcoded fix that would work just on a specific layout.

Does anyone know how to fix this issue? Please refer to this example: http://codepen.io/microcipcip/pen/kXdRWK

body {
  height: 2500px;
  &.-modal-open {
      overflow: hidden;
  }
}
.fixed {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  padding: 20px 0;
  background: #FF0000;
}
.modal {
    overflow-x: hidden;
    overflow-y: scroll;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.4);
    opacity: 0;
    transition: opacity .2s ease-in-out;
    body.-modal-open & {
        opacity: 1;
    }
}

Answer 1

The solution is very simple and a pure css fix:

.-modal-open .fixed,
.-modal-open .content {
  overflow-y:scroll;
}

..however, this requires that your content is styled differently. You should never use a margin for your content, but rather wrap it in a container and use padding instead.

The scrollbar's width isn't always 17px... 17px is for Firefox, but 15px for chrome, sometimes IE doesn't even have a scrollbar width depending on the code.

Here is the updated pen: http://codepen.io/scooterlord/pen/KgKLwB

edit: forgot to say, that this is a cross-browser solution and works flawlessly everywhere I tested it. If the browser is mobile, then no change of width happens anyway from the addition/removal of the extra scrollbars and depending on the browser the newly created scrollbars for the content/fixed elements is always the same as the initial body scrollbar.

Answer 2

The main trick is to not use body as your content wrapper. Use a dedicated div as wrapper and place your modals outside so the scrollbars don't interfere with each other.

var $btnShow = document.querySelector('.show');
var $btnHide = document.querySelector('.hide');
var $body = document.querySelector('.modal');
$btnShow.addEventListener('click', function() {
    $body.classList.toggle('-modal-open')
});
$btnHide.addEventListener('click', function() {
    $body.classList.toggle('-modal-open')
});

.wrapper {
  position: fixed;
  top: 0;
  left: 0;
  bottom:0;
  right:0;
  overflow: auto;
}
.content {
  background: url('https://www.dropbox.com/s/m16kxhb2jg5jwwh/bear-800x450.jpg?dl=0&raw=1');
  background-size: cover;
  background-position: center center;
  height: 2500px;
  width: 100%; 
}

.clickme {
  position: fixed;
  top: 50%;
  left: 50%;
  padding: 10px;
  border: none;
  background: #000000;
  color: #ffffff;
  text-transform: uppercase;
  transform: translate(-50%, -50%);
}
.clickme:hover {
  background: grey;
  cursor:pointer
}

.modal {
  overflow-x: hidden;
  overflow-y: scroll;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.4);
  display: none;
  transition: opacity .2s ease-in-out;
  z-index: 3;
}
.modal.-modal-open {
  display:block;
}
.modal-content {
  min-height: 1500px;
  margin: 100px;
  background: url('https://www.dropbox.com/s/u520y7yo711uaxi/poster2.jpg?dl=0&raw=1');
  background-size: cover;
}

<div class="modal">
    <div class="modal-content">Content
    <button class="clickme hide">Toggle Modal HIDE!</button>
    </div>
</div>
<div class="wrapper">
    <div class="content">
<button class="clickme show">Toggle Modal SHOW!</button>
    </div>
</div>