(Bug report) Slide Animation bug caused by webkitBackfaceVisibility in (iOS) Safari

[Marco]

I got the following bug within my Slider:
My slider uses the "slide" animation. The moment it's supposed to slide to the next image, it instead slides to a blank space (my background-color is white), once the slide animation is complete, the next image pops up. It looks like a delay.
This only happened in Safari (iOS 7), the other Browsers I tested (Windows 7 Chrome & Firefox, Android Stock Browser & Firefox) didn't show this bug.
Other sliders (the examples on SlidesJS) did not show this behavior, but since I'm using the "100% width"-slider (see my post from a few days ago), that might be the difference.

JS Configuration:

$(function() {
  $('#slider').slidesjs({
    width:489,
    height:382,
    effect: {
      fade: {
        speed: 1000,
        crossfade: true
      }
    },
    play: {
      auto:true,
      effect: "slide",
      interval: 6000,
      active: true
    }    
  });
});

CSS

#slider img {
  width:100%;
}

Anyways, the property that caused this can be found in line 88 of the uncompressed js-file:
        webkitBackfaceVisibility: "hidden"

By either removing the line or changing the value to "visible" (supposedly the default value), the bug no longer appeared.
Since this is a webkit property, I should've been able to reproduce the bug in Chrome, but maybe this is only implemented in Safari (even just iOS Safari).


Nathan, do you remember why you used that property anyways?

[Brendan McKeown]

I ran into the same issue on iOS 7.  Changing the webkitBackfaceVisibility property to visible as you said does fix the bug.  I thought the backface-visibility property only affected 3D transforms, so I'm not sure why it was there in the first place.

[Thin Soldier]

backface-visibility prevents a bug in safari, I don't remember the specifics of it... and/or triggers hardware acceleration of the parent slide-control div... (which shouldn't be necessary since the transition is done with translateX...? anyway...)

But there is another bug I ran into.

In iOS safari if all of your slides are <img> tags then there is no bug.

But if your slides are <div> tags then safari will not render the NEXT slide until after the slide transition is complete.

The fix seems to be to add -webkit-transform: translate3d(0, 0, 0); to all (*) elements within your slideshow area

http://stackoverflow.com/questions/9807620/ipad-safari-scrolling-causes-html-elements-to-disappear-and-reappear-with-a-dela

I accidentally came across this information after I had already gone to the trouble of making the script animate left instead of translateX when in iOS safari which for some reason doesn't suffer from the bug like translatex does.