3

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

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

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

我无法在网站上引发这种行为 - 有时看起来还不错。

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

我进一步读到，当滑动项目中存在具有 100% 高度和宽度的图像时，不会发生此问题。所以我使用了一个透明的 .gif (w 100% /h 100%) 来使问题消失，但它对我不起作用。

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

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

4

1 回答 1

3

我已经通过在 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转换错误之前会这样做，希望他们会在某个时候

干杯

于 2013-06-11T11:44:55.333 回答