javascript - iOS 8 滚动时背景图像闪烁问题

Question

我正在使用 Supersized jquery slider 插件来实现具有淡入淡出效果的全页背景 slider 并获得一些高度来滚动页面。

在桌面上，这个 slider 工作正常，但当我检查 iOS 8 iPad 设备时，发现背景图像在滚动时闪烁。

我用谷歌搜索了这个问题，发现这个问题是由于位置固定和滚动造成的。在 iOS 8 中，在滚动时，地址栏消失，导致背景图像闪烁。

JQuery 插件实现:

jQuery(function($){
            $.supersized({
                // Functionality
                slide_interval          :  2000,        // Length between transitions
                transition              :  1,   // 0-None, 1-Fade, 2-Slide Top, 3-Slide Right, 4-Slide Bottom, 5-Slide Left, 6-Carousel Right, 7-Carousel Left
                transition_speed    :  4000,    // Speed of transition

                // Components                           
                slide_links     :  'blank', // Individual links for each slide (Options: false, 'num', 'name', 'blank')
                slides          :  [            // Slideshow Images
                                                                                    {image : 'images/1.jpg'},
                                                                                    {image : 'images/2.jpg'},
                                                                                    {image : 'images/3.jpg'},
                                                                                    {image : 'images/4.jpg'},
                                                                                ]
            });
                    });

CSS 实现:

    #supersized-loader { position:absolute; top:50%; left:50%; z-index:0; width:60px; height:60px; margin:-30px 0 0 -30px; text-indent:-999em;  }

    #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; 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; }
li.image-loading {   width:100%; height:100%; }
                #supersized li.image-loading img{ visibility:hidden; }
            #supersized li.prevslide img, #supersized li.activeslide img{ display:inline; }

Answer 1

尝试为 iphone/ipad 设备实现这个..

/* 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; }
}

来源::https://stackoverflow.com/a/10145429/3164682