Zoomed images cause overflow about medium-zoom

[francoischalifour]

Thank you for reporting this bug!

I think this issue appears because we rely on window.innerWidth and window.innerHeight when retrieving the viewport size. We should rather rely on document.documentElement.clientWidth and document.documentElement.clientHeight, which ignore the scroll bar (see corresponding lines).

Do you want to contribute and fix this issue?

Let me know if you need help with anything (you can start by reading the contributing guide).

[weranda]

I fixed it like this (with jQuery):

// 1.
var getScrollbarWidth = function() {

    var container = $('<div style="width:50px;height:50px;overflow:auto"><div></div></div>').appendTo('body');
    var child = container.children();

    // Check for Zepto
    if (typeof child.innerWidth != 'function') {
        return 0;
    }

    var width = child.innerWidth() - child.height(90).innerWidth();
    container.remove();
    return width;
};

// 2. 
function zoomImage(barSize){
    var zoom = mediumZoom('[data-action="zoom"]', {
        container: {
            right: barSize
        }
    });
}

// 3.
$(window).load(function() {
    var scrollbarSize = getScrollbarWidth();
    zoomImage(scrollbarSize);
});

I don't know, correct it is or not, but it works.

[edwardhorsford]

Thank you for reporting this bug!

I think this issue appears because we rely on window.innerWidth and window.innerHeight when retrieving the viewport size. We should rather rely on document.documentElement.clientWidth and document.documentElement.clientHeight, which ignore the scroll bar (see corresponding lines).

Do you want to contribute and fix this issue?

Let me know if you need help with anything (you can start by reading the contributing guide).

@francoischalifour Thanks for the suggested fix. I've made on a fork and it seems to work. However I think the requirements for the contribution guidelines are beyond my abilities. Happy to PR for the two lines of changes, but won't be able to add tests.

[francoischalifour]

Feel free to send the PR, I'll take care of the rest!