JSSOR - IE/Firefox issue with fade transition on images/elements with CSS transform

Question

I'm using JSSOR for a slideshow which consists of slides which are using several HTML elements including an image element with CSS translate and scale styling. These CSS properties are necessary because the user can move the images around on another page.

The slider works as it should be while you drag/slide the slides. But on autoplay with the standard Fade transition something weird happens. On Internet Explorer and on Firefox when the fade starts it somehow disables the Transform CSS of the elements. When the fade is done the Transform CSS is back again.

This cause the images to move/scale while being faded. On Chrome nothing happens and the fade works as it should be.

I use fairly basic slides like these:

<div class="slide" idle="10000">
<div class="image-slide">
    <div class="image-container" style="transform: translate(66px, 108px) scale(1.61742);">
        <img src="/someimage.jpg">
    </div>
    <div class="svg-elements">
    </div>
    <div class="textArea" id="text1"
        <span>Lorem ipsum dolor</span>
    </div>
</div>

With this as settings for JSSOR:

var _SlideshowTransitions = [ { $Duration: 1200, $Opacity: 2 } ];
var options = {
$AutoPlay: true,
$AutoPlayInterval: 4000,
$PauseOnHover: 0,
$SlideshowOptions: {                                
    $Class: $JssorSlideshowRunner$,               
    $Transitions: _SlideshowTransitions,           
    $TransitionsOrder: 1,                           
    $ShowLink: true                                   
}

};

Update

I've added a fiddle with the same results

Answer 1

This is a bug, I have just fixed it and updated. Please download the latest.