3

何時間もググった後、ここに次の質問を投稿することになりました。

Web ページのレスポンシブ タッチ スライダーとして swipejs (swipejs.com) を使用しています。それはかなりクールで、すべてのブラウザーとモバイル デバイスで私のニーズに合わせて正常に動作しています。

しかし、Firefox (バージョン 18 - 20) で問題が発生しました。私が「ページング」している間、最初のスライドは問題ないように見えますが、2 番目のスライド (およびそれに続くすべてのスライド) は非常に奇妙に見えます。

Web サイトでその動作を誘発することはできません。問題ないように見える場合もあります。

swipe.js のスワイプ機能は、(マージンを増やしてスライドを押しのける代わりに) translate() 関数で動作します。実際には、Firefox の翻訳機能にバグがあり、スライドがひどいものになっていることがわかりました。

さらに、スワイプ項目に高さと幅が 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 に答える