iOS 8中滾動時背景圖像閃爍問題

Question

我正在使用具有超大效果的整頁背景滑塊的Supersized jquery滑塊插件，並獲得一些高度來滾動頁面。

在桌面中，此滑塊正常工作，但是當我在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