FlexsliderがChromeで私のウェブページを本当に乱している

Question

誰かにこの種の問題があったのですか？私は私のページのトップにドロップダウンメニューを持っていますし、次にflexslider、いくつかの一般的なテキストと画像... GoogleフォントAPIから呼び出されたものと、fontFaceを使ったものの2つのフォントがあります。 ！）..

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

残念ながら私は100％完成するまで自分のプロジェクトをウェブ上に載せるのではなく、フィドルを作るにはあまりにも多くのものだと思っています。実際のflexsliderウェブページを見ても、あなたがサムネイルを見ると、私が何を意味するのかが分かります（あなたがChromeの場合）。 - http://flexslider.woothemes.com/thumbnail-controlnav.html

私が作業しているコードを保存したいので、誰でも修正を知っていますか？

Answer 1

私はまさに同じ問題を抱えています。今ではFlexSliderをBootstrap応答サイトに実装したばかりです。この問題は、FirefoxやSafariでは複製されません（IEはまだチェックされておらず、特にそうしたくはありません）。

FlexSlider JSがスライドショーを進めるために実装しているさまざまなタッチ、キー押しなどの問題が、私のCSS（Google Font APIへのhrefを含む）とJSスクリプトを1つずつFlexSliderのJSが原因であると判断します。良いことは、BootstrapレスポンスJSとの矛盾ではなく、他のCSSスタイルのようでもないことです。まだトラブルシューティングしても、私はもっと役立つことはできませんが、少なくともあなただけではありません。

私はこれをFlexSliderフォーラムに投稿します。たぶん、開発者は次のリリースでこのChromeバグの修正を扱うかもしれません。

---

クロームv23.0.1271.64

Answer 2

見つかりJS触れることなくChromeで問題を解決しているようだ修正：useCSSと組み合わせる

-webkit-背面視認性を：true Slider initのがクロムの下で固定位置とZインデックスを解除します。固定トップナビゲーター、スライダーコンテナ、およびZ-インデックス値で遊んでいたときに奇妙なことが起こっていることに気付きました.Z-インデックスを固定ナビより高く設定すると、奇妙なテキストの点滅が消えましたが、固定ナビゲーションバーの上をスクロールします。

は、この問題を回避するには、以下の二つのことを実行します。 .flexslider： "flexslider.css" ライン25で

• を。スライド> li コメントアウトまたは削除-webkit-backface-visibility：hidden; 「useCSSを：偽」を指定：flexslider初期化スクリプトで
• あなたのスライダーオプションで*

*これはflexslider JSによってデフォルトとしてtrueに設定されているとするブラウザに指示します利用可能な場合は、CSS3の3D変換を使用してください。あなたが私に尋ねると不要な機能、およびフレックススライダーはそれなしでうまくいくようです。

希望すると便利です。

Answer 3

位置追加：コメントアウトまたは-webkit-backface-を削除 "flexslider.css" 見つける ".flexslider .slides>李" ではCSSファイルで、ビューポートを.flexする

Answer 4

を1：相対& Zインデックスを可視性：非表示;

Answer 5

gruntPi9が提案した解決策が私に役立った。私はChromeで問題を抱えていました。画像がフレームから飛び出していて、彼の解決策が問題を解決しました。

スライダー：FlexSlider 2

ブラウザ：クローム

問題：

• で "flexslider.css" 行25：.flexsliderフレーム

  ソリューションの飛び出しイメージ.slides> liコメントアウトまたは削除-webkit-backface-visibility：hidden; "jquery.flexslider.js" で

• ：指定：あなたのスライダーオプションの 'useCSS偽'

Answer 6

--webkit変換を適用：translateZ（0）;影響を受けた要素のコンテナに移動すると、フリックリングが停止します。

これは、flexslider内にテキストを含む要素がある場合にも機能します。

CSSトランスフォームは、依然として奇妙な動作を引き起こします。要素を強制的に3Dとしてレンダリングすると、グラフィックやパフォーマンスの不具合が解決されるようです。

Chrome v27.0.1453.93でテスト済みです。

Answer 7

私はこれが古かったことは知っていますが、私は約1時間、手をつけてすぐに私の解決策を投稿すると思っていました。このよう

：.flexslider： "flexslider.css" ライン25に

• 。スライド> liコメントアウトまたは 削除-webkit-backface-visibility：hidden; flexslider初期化スクリプトで
• ：-webkit-変換
• あなたのスライダーオプションで： '偽useCSSを'：指定translateZ（0）親要素

に続いてflexslider」の下にこれを追加.css "：

.flex-viewport { 

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

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