2015年03月19日 web関連jQuery・javascript

レスポンシブ対応でとても重宝しているowlカルーセルですが、safariでは、スライド時に、フォントが細くなったり、太くなったりして、点滅するような現象が起こっていました。
iOSのchromeでも同じ現象が起こるらしいのですが、未確認。

解決策

以下のコードをCSSファイルに追加すれば解決しました。

.owl-carousel {
    overflow: hidden;
    position: relative;
    width: 100%;
    z-index: 1;  // added this
}

OwlカルーセルのGithubにて問題として取り上げられていました。

引用 : Flickering on slide in Chrome and Safari

この投稿へのコメント

コメントはまだありません。

コメントを残す

メールアドレスが公開されることはありません。

次のHTML タグと属性が使えます。
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

CAPTCHA


ピックアップ記事

Googleアドセンスがhtml要素を覆い隠してクリック出来ない

2015年03月04日 web関連
Google Adsenseを設置すると隣接する要素をオーバーラップしてしまい、クリック出来なくなる場合の対処法です。 アドセンスが隠してしまってクリック出来ない要素を#navだとすると以下のようにCSSを設定します。 [php]#nav { position:relative; z-index: 100; }[/php]
「Googleアドセンスがhtml要素を覆い隠してクリック出来ない」をはてなブックマークに追加

HTML上に配置した画像に隙間が出来るときの対処法

2012年02月10日 web関連
配置した画像に余計な隙間(スペース)が出来る HTML上に画像を配置したときに、予期せぬスペースが出来るときってありませんか?(画像参照)単純に配置しただけなのに・・・と思うのですが、そんな時はCSSを以下のように設定することで解決できます。 解決策 CSSファイルに以下の設定を記述する。 [php]img { vertical-align: top; }[/php] …
「HTML上に配置した画像に隙間が出来るときの対処法」をはてなブックマークに追加

fontawesomeでアイコンを反転させる方法

2022年11月12日 web関連
反転させたいアイコンに以下のクラスを追加する。 水平反転 [php]fa-flip-horizontal[/php] 垂直反転 [php]fa-flip-vertical[/php]
「fontawesomeでアイコンを反転させる方法」をはてなブックマークに追加

wordpressのパンくずリストをmicrodata対応させる[追記あり]

2014年08月04日 web関連WordPressphpSEO対策
WordPressのパンくずリストをリッチスニペット(microdata)に対応させてみました。 リッチスニペットについては下記を参考にしてください。 リッチ スニペット - パンくずリスト(Google) 対応後のコードはGistにあります。という割に、Gistの使い方がよくわかっていません・・。 少しずつ勉強していきます。(^_^;) microdata対応のWordpr…
「wordpressのパンくずリストをmicrodata対応させる[追記あり]」をはてなブックマークに追加

Dreamweaverのソース検索で正規表現を使う

2012年01月23日 web関連
今回は、wordpressからエクスポートした記事のxmlデータを、他のwordpressに入れる際に、xmlにカテゴリやタグが入っていると、新しいwordpressにもカテゴリが全部追加されて、不要なカテゴリが増えてしまったので、それを防ぐために、インポート前のxmlデータからカテゴリやタグにあたる箇所を削除してから、インポートするためにdreamweaverで正規表現を使いました。 Word…
「Dreamweaverのソース検索で正規表現を使う」をはてなブックマークに追加
© graffiti on the web . All rights reserved. WordPress Theme by comfy