5

他の誰かがこの種の問題を抱えていましたか？ページの上部にドロップダウンメニューがあり、次にflexslider、次にいくつかの一般的なテキストと画像があります...2つのフォントがあります。1つはGooglefonts APIから呼び出され、もう1つはfontFaceを使用します（これが関連する場合に備えて） ！）..

MacのChromeで表示すると、非常に奇妙な動作が発生します。スライドが移動するたびに、ページ上のすべてのテキストが非常に「薄く」なり、一部の（すべてではない）ナビゲーションリンクがピクセル単位で上下に「ジャンプ」します。私はこのようなものを見たことがなく、それは奇妙な対立だとしか思えませんか？私は、MacのFF、Opera、Safari、Chrome、WindowsのIE9、Chrome、WindowsのFFなど、見つけることができるすべてのものでテストしました。Chromeの両方のバージョンは見栄えがよくありませんが、Macのバージョンははるかに悪いです。

残念ながら、プロジェクトが100％完了するまで、プロジェクトをWebにリストしたくないので、フィドルを作成するには多すぎると思います。しかし、実際のflexslider Webページを調べたところ、同じ種類の障害が見つかりました。サムネイルを見ると、私が何を意味しているのかがわかります（もちろんChromeを使用している場合）。-http ://flexslider.woothemes.com/thumbnail-controlnav.html

私が取り組んできたコードを保持したいので、誰かが修正を知っていますか？

4

7 に答える 7

17

JSに触れずにChromeの問題を解決するように見える修正を見つけました：

-webkit -backface-visibilityをスライダーの init でuseCSS:trueと組み合わせると、Chrome で固定位置と z-indexing が壊れます。固定トップ ナビゲーション バー、スライダー コンテナー、および z-index 値をいじり始めたときに、奇妙なことが起こっていることに気付きました。z-index を固定ナビゲーション バーよりも高く設定すると、奇妙なテキストの点滅はなくなりましたが、もちろん、スライダーはその後消えました。固定ナビゲーションバーの上にスクロールしました。

これを回避するには、次の 2 つのことを行います。

  • 「flexslider.css」の 25 行目: .flexslider .slides > li コメント アウトまたは削除 -webkit-backface-visibility: hidden;
  • flexslider 初期化スクリプト: スライダー オプションで「useCSS : false 」を指定します*

*これは、flexslider JS によってデフォルトで true に設定され、利用可能な場合は CSS3 3D 変換を使用するようブラウザに指示します。あなたが私に尋ねるなら、不要な機能であり、flexsliderはそれがなくても問題なく動作するようです.

お役に立てれば！

于 2012-11-18T21:48:49.383 に答える
5

cssファイルの.flex-viewportにposition：relative＆z-index：1を追加します

于 2013-02-04T20:35:09.710 に答える
1

これが古いことは知っていますが、1時間いじった後、すぐにソリューションを投稿すると思いました。

上記のように：

  • 「flexslider.css」の 25 行目: .flexslider .slides > li コメント アウトまたは削除 -webkit-backface-visibility: hidden;
  • flexslider 初期化スクリプトで: スライダー オプションで「useCSS : false」を指定します。
  • -webkit-transform: 親要素の translateZ(0)

次に、これを「flexslider.css」の下部に追加します。

.flex-viewport {

    -webkit-transition: none;
    -moz-transition: none;
    transition: none;
}

それはChromeで私のためにそれをしました! この問題を抱えている他の誰かに役立つことを願っています。

于 2013-11-28T17:31:43.113 に答える
0

gruntPi9 が提案した解決策は私にとってはうまくいきました。Chrome で問題が発生し、画像がフレームから飛び出していましたが、彼のソリューションで問題が解決しました。

スライダー: FlexSlider 2

ブラウザ: クロム

問題: 画像がフレームから飛び出す

解決：

  • "flexslider.css" の 25 行目: .flexslider .slides > li コメント アウトするか、-webkit-backface-visibility: hidden; を削除します。
  • 「jquery.flexslider.js」: スライダー オプションで「useCSS : false」を指定します。
于 2013-05-22T09:31:07.670 に答える
0

今日FlexSliderをBootstrapレスポンシブサイトに実装したばかりで、まったく同じ問題が発生しています。この問題は、Firefox や Safari では再現されません (IE はまだチェックしておらず、特にチェックする必要もありません)。

CSS (Google Font API への href を含む) と JS スクリプトを 1 つずつ削除して FlexSlider の JS がどうやら犯人らしい。幸いなことに、これは Bootstrap レスポンシブ JS と競合しておらず、他の CSS スタイルでもないようです。まだトラブルシューティング中ですが、これ以上お役に立てず申し訳ありませんが、少なくともあなただけではありません.

これを FlexSlider フォーラムに投稿します。おそらく、開発者は次のリリースでこの Chrome バグの修正に対処するでしょう。

クローム v23.0.1271.64

于 2012-11-13T23:27:26.410 に答える