经过几个小时的谷歌搜索,我刚刚在这里发布了以下问题:
我在我的网页上使用 swipejs (swipejs.com) 作为响应式触摸 slider 。 它非常酷,在所有浏览器和移动设备上都能很好地满足我的需求。
但我在使用 Firefox(版本 18 - 20)时遇到了问题。 当我“翻页”时,第一张幻灯片看起来还不错,第二张 - 以及后面的每一张 - 看起来都非常奇怪。
我不能在网站上挑起这种行为 - 有时看起来还不错。
swipe.js 的滑动功能与 translate() 函数配合使用(而不是通过增加边距来推开幻灯片) 我发现,实际上 Firefox 的翻译功能中存在一个错误,这使得幻灯片看起来很糟糕。
我进一步了解到,当滑动项中的图像具有 100% 的高度和宽度时,不会发生此问题。 所以我使用透明的 .gif (w 100%/h 100%) 使问题消失,但它对我不起作用。
这种行为很难解释,因此这里有一个 youtube 链接,指向显示上述错误/问题的视频。 http://www.youtube.com/watch?v=0l1icgUDOjU
有没有人遇到同样的问题? 有谁知道适合我的解决方案吗?
最佳答案
我通过在 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 转换错误之前会这样做,希望他们会在某个时候修复
干杯
关于javascript - 滑动JS : Firefox issue,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16560766/