Bad image width on resizing down

[rowild]

When the browser window is resized down, an ugly margin-right that already shows the next picture is shown.

I couldn't find the error... sorry! But it would be great,if you could make it work.

Seen on Chrome on a Mac.

[webbiesdk]

I often resize the browser window as part of my tests, and i haven't seen an issue as you describe for at least a year. I don't have a Mac, but i tried in Chrome, Firefox and IE on my machine, and couldn't replicate the issue.

Does it happen on one of your own sites, or in one of my demos? Could i get a link to where it happens?

[rowild]

Thanks for your quick response! I set up a test site here: http://tomatis.rowild.at/sudoslider-test.html Please log in with sudoslider | sudoslider

The problem seems to happen somewhere in the if-clause in this section:

win.on("resize blur focus", function () {
                var sliderWidth = sudoSlider.width(),
                    sliderHeight = sudoSlider.height();
                //resizeRatio = imageWidth / sliderWidth;

                //console.log("imageWidth:", imageWidth, "; Slider Width:", sliderWidth);
                //console.log("resizeRatio:", resizeRatio);

                if ((sliderWidth / sliderHeight) < aspectRatio) {
                    console.log("IF - something is wrong here...");

                    var leftMargin = ((sliderWidth - (sliderHeight * aspectRatio)) / 2);

                    backgroundImage.css({
                        left: leftMargin,
                        top: 0,
                        //right: -leftMargin ,
                        //bottom: 0,
                        width: (sliderHeight * aspectRatio),
                        height: sliderHeight
                    });
                } else {
                    console.log("ELSE - here everything is ok");

                    var ratio = sliderWidth / aspectRatio;
                    backgroundImage.css({
                        left: 0,
                        right: 0,
                        top: (sliderHeight - ratio) / 2,
                        bottom: (sliderHeight - ratio) / 2,
                        height: ratio,
                        width: sliderWidth
                    });
                }
            }).resize();

[webbiesdk]

Yep, you found a bug.

Try to add the following CSS:

slider .slide {position: relative; height: 100%; overflow: hidden;}

That fixed it in my fullscreen demo.

[rowild]

Thanks for your response!!!

In my case it was (additionally?) a problem that was introduced by ZURB's Foundation. In case anybody is interested, add this to your CSS:

#slider img {
    /* ZURB's Foundation adds an img { max-width:100% }, which causes troubles when resizing the image */
    max-width: none;
    /* ZURB's Foundation also adds an img { vertical-align: middle }, but that does not seem to cause any problems */ 
    /*vertical-align: top;*/
}

[webbiesdk]

Glad that it fixed your problem.

I will add the "#slider .slide {position: relative; height: 100%; overflow: hidden;}" to my demo.