0

I am using jssor to create slideshow that fades in and out. It works perfectly on all the devices except for iphones and ipads. On these devices it jumps to white and then fades. Does anyone have any fixes for this. THis is the code i'm using.

jQuery(document).ready(function ($) {

    var _SlideshowTransitions = [
{ $Duration:1200, $Opacity:2 }
];
var options = {
        $SlideDuration: 800,                                                
        $DragOrientation: 3,                                
        $AutoPlay: true,                                                
        $AutoPlayInterval: 3000,                                        
        $SlideshowOptions: {                                
            $Class: $JssorSlideshowRunner$,                 
            $Transitions: _SlideshowTransitions,
            $TransitionsOrder: 1,
            $ShowLink: true                                               
   }
};

    var jssor_slider1 = new $JssorSlider$('slider1_container', options);

});

   <div id="slider1_container" style="position: relative; top: 0px; left: 0px; width: 686px; height: 224px;">

<!-- Slides Container -->

<div u="slides" style="cursor: move; position: absolute; overflow: hidden; left: 0px; top: 0px; width: 686px; height: 224px;">

    <div><a u="image" href="/developments/completed/cambagardens"><img src="/Publishingimages/slideshow/001_CG-external.jpg" /></a></div>

    <div><a u="image" href="/developments/completed/97crookeavenue"><img src="/Publishingimages/slideshow/002_crooke-external.jpg" /></a></div>

<div><a u="image" href="/developments/completed/morrismanor"><img src="/Publishingimages/slideshow/003_MorrisManor-external.jpg" /></a></div>
<div><a u="image" href="/developments/completed/880willoughby"><img src="/Publishingimages/slideshow/004_880-external.jpg" /></a></div>
<div><a u="image" href="/developments/completed/cambagardens"><img src="/Publishingimages/slideshow/005_CG-lobby.jpg" /></a></div>
<div><a u="image" href="/developments/completed/cambagardens"><img src="/Publishingimages/slideshow/006_CG-apartment.jpg" /></a></div>
<div><a u="image" href="/developments/completed/97crookeavenue"><img src="/Publishingimages/slideshow/007_Crooke-garden.jpg" /></a></div>
<div><a u="image" href="/developments/completed/97crookeavenue"><img src="/Publishingimages/slideshow/008_Crooke-community-room.jpg" /></a></div>
<div><a u="image" href="/developments/completed/97crookeavenue"><img src="/Publishingimages/slideshow/009_Crooke-bedroom.jpg" /></a></div>
<div><a u="image" href="/developments/completed/880willoughby"><img src="/Publishingimages/slideshow/010_880-garden.jpg" /></a></div>
<div><a u="image" href="/developments/completed/cambagardens"><img src="/Publishingimages/slideshow/011_CG-courtyard.jpg" /></a></div>
<div><a u="image" href="/developments/completed/cambagardens"><img src="/Publishingimages/slideshow/012_CGexternal2.jpg" /></a></div>
</div>

Kristin
  • 1
  • 1
  • Please post your html code. What's your browser/webkit version? Does it happen on http://www.jssor.com? – jssor Mar 14 '15 at 00:26
  • i added the html code. i have managed to get it to not flicker to white now but it still flickers slightly. i can't find an exact copy of what i'm doing on jssor with the fade image linked but the regular fade without the link works fine on the ipad. any suggestions? – Kristin Mar 16 '15 at 14:06

1 Answers1

0

Try using -webkit-backface-visibility: hidden; on your element

for more info, see this related question: iPhone WebKit CSS animations cause flicker

Community
  • 1
  • 1