Question

Edit: I forgot to mention, this only happens in Chrome (latest version).

This is the setup:

<fancyboxOverlay>
    <fancybox>
        <ContainerDiv>
            <MenuDiv>
            <ScrollableContentDiv>
                <ActualContentDiv>

Whenever the ActualContentDiv gets longer than the ScrollableContentDiv the latter one will show scrollbars. The whole box contains a form which pretty much is only about divs (“Pages”) getting shown or hidden by pressing a “next” button.

This is the problem:

One of the Pages is very long and has a “next” button at the end. When pressed the next page is shown but also the fancybox shifts to the right and to the bottom. And not just the fancybox alone but also the fancyboxOverlay. The new top left corner of the overlay is then located where the top left corner of the fancybox was before.

Also it seems as if this shift is just visual but the actual content elements like buttons or input fields are still at the same spot where they are supposed to be only now they’re “invisible”. This occured to me when I hovered over an area where the next button’s supposed to be and the visual representation of that button (now being placed far off) switched to it’s hover state.

I don’t know, if you understand what I mean. Visually all content moved to the right and a bit to the bottom but my mouse cursor shows me that they’re right where they should be. And the shift only happens when the content is to long.

It’s confusing.

The fancybox call is:

$("a.various").fancybox({
    fitToView: false,
    autoSize: true,
    //width: 710,
    //height: 700,
    closeClick: false,
    autoCenter: false,
    scrolling: 'auto',
    helpers: {
        overlay: { closeClick: false }
    }

The overflow styles are the following:

ContainerDiv: no overflow styles
MenuDiv: no overflow styles
ScrollableContentDiv: overflow-y: auto; overflow-x: hidden;
ActualContentDiv: overflow-x: visible; overflow-y: visible;

I don’t know how to explain this better. I am not alowed to show the project. So can anyone help me with this?

Answer 1

Any demonstration would help to understand your issue. I tried to re-create, but worked fine for me. Maybe disabling next/prev animations would help –

$("a.various").fancybox({
    nextEffect        : 'none',
    prevEffect        : 'none'
});

​

See in action – http://jsfiddle.net/qwHW7/