CSSが本番環境と同じなのに崩れる(行末で改行されず文字が突き抜ける・レイアウト崩れる)問題

2018-04-25

2226

system

関連メモ

現在:公開中

CSSが本番環境と同じなのに崩れる(行末で改行されず文字が突き抜ける・レイアウト崩れる)問題


【条件】

本番で正常に動いているCSSがある
CSSの差分チェックはOK
要するに同じCSSのはずなのに、差がある。


【分析】

動的に出力されたHTMLも差分チェックかけたが特に問題点なさそう。

怪しい点があるとしたら、フレームワークで保存している動的画面のキャッシュ。
しかしこれもviewだけの話だよな。


【解決】

先輩に質問したら10秒ぐらいで解決した。俺の4時間なんだったんだろう。

結果としては本番もCSSは壊れていたしファイルも同じだ。
ただ本番で使ってる文字列データの長さがある程度あって2行分あった
がゆえにバグが再現しない状態だっただけだった。
試しに開発者ツールで文字数を減らして1行分にしたところ見事に崩れた。

さらに本番では半角英数字が使われていなかったが、テストデータでは半角英数字を使っていたところ文字が突き抜けていた。


【結論】

エラー解決の手法としては、本番と同じ状態にしてあげればよかったかなと思う。
テストデータで「testtest」とか「テストテスト」じゃなく、1件でも2件でもいいので本番とおんなじデータを入れていれば。
もっと早く気づけた気がする。
差分を調べるうえでは、同じ状態にしなきゃダメですね。出来る限り。
あと苦手なこと(この場合CSS)はさっさと聞いたほうがいいかも。。

0

投稿者:system / 投稿日:2018-04-25 15:11:48 / PV数:2226 / コメント数:0

sponsor

コメント 0

コメント投稿