Question

经过几个小时的谷歌搜索，我刚刚在这里发布了以下问题：

我在我的网页上使用swipejs（swipejs.com）作为响应式触摸滑块。它非常酷，它可以满足我在所有浏览器和移动设备中的需求。

但我遇到了Firefox（第18 - 20版）的问题。当我'分页'时，第一张幻灯片看起来没问题，第二张幻灯片 - 以及随后的每张幻灯片 - 看起来都非常奇怪。

我无法挑起网站上的行为 - 有时它看起来很好。

swipe.js的滑动功能与translate（）函数一起使用（而不是通过增加边距来推动幻灯片）我发现，实际上Firefox的翻译功能存在一个错误，使得幻灯片看起来很糟糕。

我还读到，当滑动项目中有100％高度和宽度的图像时，不会发生此问题。所以我使用透明的.gif（w 100％/ h 100％）使问题消失，但它对我不起作用。

这种行为很难解释，因此这里有一个指向视频的youtube链接，该视频显示了上述错误/问题。 http://www.youtube.com/watch?v=0l1icgUDOjU

有没有人有同样的问题？有谁知道我的解决方案？

Answer 1

我已经通过在swipe.js中修改（黑客）构造函数中的transitions参数来解决这个问题。在我的例子中

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;
}

变为

 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;
}

不漂亮，但确实有效 - 尝试过。您可以通过添加版本18及更高版本的附加检查来改进它。

所以直到firefox修复他们的css过渡bug，希望他们会在某些时候

干杯

SwipeJS：Firefox问题

1 个答案: