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
コメント 0
コメント投稿