SwipeJS: 火狐浏览器问题

Question

经过几个小时的谷歌搜索，我最终决定在这里发布以下问题：

我在网页上使用swipejs (swipejs.com)作为响应式触摸滑块。它非常酷，而且在所有浏览器和移动设备中都能正常工作。

但是我在Firefox（版本18-20）中遇到了一个问题。当我“翻页”时，第一张幻灯片看起来还不错，第二张以及其后的每一张都看起来非常奇怪。

我无法在网站上引发此行为-有时它看起来很好。

Swipe.js的滑动功能使用translate()函数（而不是通过增加边距来推送幻灯片）。我发现实际上，Firefox的translate函数存在错误，导致幻灯片看起来很糟糕。

此外，我阅读到，如果swipe项目中有一张100％高度和宽度的图像，则不会出现此问题。因此我使用了一个透明的 .gif（w 100％/h 100％），但对我没有起作用。

这种行为很难解释，因此在这里提供一个YouTube链接，其中包含显示前述错误/问题的视频。 http://www.youtube.com/watch?v=0l1icgUDOjU 有人遇到过同样的问题吗？ 有人知道如何解决这个问题吗？

- jeff

Answer 1

我通过在swipe.js的构造函数中微调(黑客)转换参数来解决了这个问题。 在我的例子中。

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过渡错误之前，这个方法是可行的。希望他们在某个时候解决这个问题。

谢谢！

- Crab Bucket

---

哦不，小心螃蟹的黑客攻击，它会破坏在iOS上的滑动功能。也许解决方案是省略for循环中的最后一行“return false;” - 但不确定是否会产生副作用。 - Herr_Hansen