JS Supersized plugin - images cutting off at edge of viewport

So I'm using the Supersized plugin (http://buildinternet.com/2011/07/supersized-3-2-fullscreen-jquery-slideshow/) to display beautiful background images behind the site. It normally stretches to fit whichever size your browser window is. On the iPad, the background cuts off at the end of the viewport. I can pinch to see the whole site and zoom in just fine. But the background stays put.

The most important thing I need to have is the images fill the length and height of the content. Link and css below:

http://www.xsp.com/new_site/index.php

Any help is greatly appreciated, under the gun here. Thanks.

    /* Supersized styles */
    #supersized-loader { position:absolute; top:50%; left:50%; z-index:0; width:60px; height:60px; margin:-30px 0 0 -30px; text-indent:-999em; background:url(../img/progress.gif) no-repeat center center;}

    #supersized {  display:block; position:fixed; left:0; top:0; overflow:hidden; z-index:-999; height:100%; width:100%; }
    #supersized img { width:auto; height:auto; position:relative; display:none; outline:none; border:none; }
    #supersized.speed img { -ms-interpolation-mode:nearest-neighbor; image-rendering: -moz-crisp-edges; }   /*Speed*/
    #supersized.quality img { -ms-interpolation-mode:bicubic; image-rendering: optimizeQuality; }           /*Quality*/

    #supersized li { display:block; margin: 0; list-style:none; z-index:-30; position:fixed; overflow:hidden; top:0; left:0; width:100%; height:100%; background:#111; }
    #supersized a { width:100%; height:100%; display:block; }
    #supersized li.prevslide { z-index:-20; }
    #supersized li.activeslide { z-index:-10; }
    #supersized li.image-loading { background:#111 url(../img/progress.gif) no-repeat center center; width:100%; height:100%; }
    #supersized li.image-loading img{ visibility:hidden; }
    #supersized li.prevslide img, #supersized li.activeslide img{ display:inline; }
    /* Supersized styles end */

Jason Paul

I figured out one way to fix it with iPhone/iPad css media queries. It's probably not the best way, more like putting tape on it so it will hold together. But it works so I'm happy:

/*Fix Supersized on iOS*/

/* iPad [portrait + landscape] */
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {
#supersized { margin-left:0;}
}
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait) {
#supersized { width:110% !important;}
}


/* iPhone [portrait + landscape] */
@media only screen and (max-device-width: 480px) {
#supersized { margin-left:0; }
}

The issue is from the common css that set your image all base on "max-width:100%" Check your css reset if there is something img { max-width: 100%; }

The supersized official has a solution for the file "supersized.3.2.7.js": https://github.com/buildinternet/supersized/issues/103

If you can not solve it by following the official solution, try add this in your supersized css:

#supersized img { max-width: none; }

this tricky is by http://blog.valderama.net/node/30

来源：https://stackoverflow.com/questions/9945448/js-supersized-plugin-images-cutting-off-at-edge-of-viewport

标签

jquery

html

css

supersized