body.vex-open causes visual shift about vex HOT 1 CLOSED

This was unfortunately one of the side-effects of our fix for #18.

If you want to remove this feature, you can do this simply by adding the following CSS to your page:

html body.vex-open {
    overflow: auto
}

If you want to keep the scroll prevention but (attempt to) remove the visual shift that this causes, you can try to adding a padding-right to the vex-open class which is the same width as the scrollbar. Since this width varies from browser to browser, you may want to try to detect the scrollbar width dynamically.

Here's one way you might implement that:

var getScrollbarWidth = function() {
    var scrollbarWidth,
        $scrollDiv = $('<div style="width: 100px; height: 100px; overflow: scroll; position: absolute; left: -99999px;"></div>')
    ;
    $('body').append($scrollDiv);
    scrollbarWidth = 15 || ($scrollDiv[0].offsetWidth - $scrollDiv[0].clientWidth);
    $scrollDiv.remove();
    return scrollbarWidth;
};

$('body').append('<style>html body.vex-open { padding-right: ' + getScrollbarWidth() + 'px; }</style>');

jsFiddle Demo

from vex.