LoginSignup
1
1

More than 1 year has passed since last update.

デバッグメモ CSSライブラリ

Last updated at Posted at 2015-02-20

相当面倒なライブラリ依存の不具合動作に直面したため、
繰り返さないようにメモ。

forkしたjQueryプラグインを検証していたところ、
iOSのモバイルSafariでのみ、以下のような現象に遭遇。

「表組みされた要素が時刻部分のみスクロールしない」

スクリーンショット_2015_02_20_9_17.png

概要は、

  • CSSでabsolute設定で表組みしたスケジューラのプラグイン
  • 時刻を横軸に持ち、スクロールできる
  • Bootstrapのmodal上で動作させた際に発生
  • iOSのモバイルsafariでのみ発生(iPad, iPhone)

ここで検討をつけたのは、iOS固有のCSS処理が影響していること。
けれど、全く検討違いのライブラリの動作が影響していた。

「animate.css」で上記のプラグインを動作後に「fadeIn」アニメーションを使用していた場合にのみ発生していた。

animate.cssの読み込みが影響していたわけではなく、addClass,removeClassでanimate.cssのクラスを付加・削除する動作がスクロール動作に影響していた。

Chromeでもウィンドウサイズを変えるとレスポンシブなBootstrapのtab部分が崩れてしまう現象も経験したけど、動的にCSSを触ることが他の動作に影響する(環境依存で)というとてもデバッグしにくい現象でした。

そもそも表組みのHTML要素とCSSの組み方が悪い気がしているので、
余裕があるときにプラグインを見直そうと思う。

1
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
1