Utilizing the Supersized jQuery slider plugin to create a full-page background slider with a fade-in effect and added height for scrolling.
The slider functions correctly on desktop, but upon testing on an iOS 8 iPad device, there is noticeable flickering of the background image during scrolling.
After researching the issue, it was discovered that this problem arises due to fixed positioning and scrolling. In iOS 8, the disappearance of the address bar during scrolling causes the background image to flicker.
Implementation of the jQuery Plugin:
jQuery(function($){
$.supersized({
// Functionality
slide_interval : 2000,
transition : 1,
transition_speed : 4000,
// Components
slide_links : 'blank',
slides : [
{image : 'images/1.jpg'},
{image : 'images/2.jpg'},
{image : 'images/3.jpg'},
{image : 'images/4.jpg'},
]
});
});
CSS Implementation:
#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; }