SwipeJS: Firefox issue

Question

After hours of google'ing I'm just ending up posting following question here:

I'm using swipejs (swipejs.com) as a responsive touch slider on my webpage. It's pretty cool and it's working fine for my needs in all browser and mobile devices.

But I got an issue with Firefox (Version 18 - 20). While I'm 'paging', the first slide looks okay, the second one - and every one that follows - looks extremely weird.

I can't provoke the behavior on the website - sometimes it looks just fine.

The swipe functionality of swipe.js works with the translate() function (instead of pushing the slides away by increasing the margin) I found out, that actually there is a bug in the translate function of Firefox which makes the slides looking horrible.

Further i read, that this issue doesn't occur when there's an image with 100% height and width in the swipe items. So i used a transparent .gif (w 100% /h 100%) to make the issue disappear but it didn't work for me.

The behavior is hard to explain, therefore here is a youtube link to a video which shows up aforementioned-bug/issue. http://www.youtube.com/watch?v=0l1icgUDOjU

Does anyone had the same problem ? Does anyone know a solution for me ?

Answer 1

I've fixed this by tweaking (hacking) the transitions parameter in the constructor in swipe.js. In my example

transitions: (function (temp) {
          var props = ['transitionProperty', 'WebkitTransition', 'MozTransition', 'OTransition', 'msTransition'];
          for (var i in props) {

if (temp.style[props[i]] !== undefined) {
                return true;
              }
              return false;
          }
          return false;
}

becomes

 transitions: (function (temp) {
          var props = ['transitionProperty', 'WebkitTransition', 'MozTransition', 'OTransition', 'msTransition'];
          for (var i in props) {

              if (navigator.userAgent.toLowerCase().indexOf('firefox') > -1) {
                return false;
              }
              else if (temp.style[props[i]] !== undefined) {
                return true;
              }
              return false;
          }
          return false;
}

Not pretty but does work - tried it. You could improve it by adding an addition check for version 18 and above.

So will do until firefox fix their css transition bug which hopefully they will at some point

Cheers