在 iOS 8 中滚动时背景图像闪烁问题

Posted 2023-03-14

【中文标题】在 iOS 8 中滚动时背景图像闪烁问题

【英文标题】：Background image flickering issue on scroll in iOS 8

【发布时间】：2015-02-11 05:28:54

【问题描述】：

我正在使用 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; 

【参考方案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://***.com/a/10145429/3164682