コミュニケーション サイトがようやく利用できるようになったので早速サイトを作ってみました。ワクワク！
色々触っているうちに気になった点があります。レスポンシブ対応だったと思ってブラウザの幅をウネウネと変えてみたんだけど、一般的なレスポンシブのWebサイトとどうも挙動が違うんですね。コミュニケーション サイトは幅を変えてからワンテンポ遅れてレイアウトが変わるんです。
▼幅を縮めるとこのような状態に。一瞬「え？これがレスポンシブ対応？？」と疑ってしまいました。
▼1秒ほど遅れてサイズに合ったレイアウトになります。そりゃそうだよね、安心した！
開発者ツールでウォッチしてみると少しわかりました。定点しか見ていないので全体は把握できていませんが、例えばdivにstyle=”height:300px”など、CSSがインラインで書かれているんだけど、サイズを変えて1秒ほどするとその300pxの数値が変わるんです。 Nintex Forms のパネルの表示・非表示の挙動に類似しています。
Heroと呼ばれる画像がタイル状になっているパーツに関しては、ブラウザが広いとタイルですが、狭いとカルーセルに変わります。その際に隠れるタイルがdisplay:noneで消えるのかと思ったら、どうやらゴソっとHTMLが変化しているようです。
つまり、ブラウザサイズを変更するとHTMLやらCSSやら諸々が再描画される感じでしょうか。ちょっと普通のレスポンシブ対応とは違った感じです。あまり気にしなくても良いとは思うけど、パフォーマンスに影響はないでしょうかね。 Nintex Forms に関してはあまり1ページに多数のコントロールを配置すると一気にページの読み込みが遅くなるので。また一般的なWebのレスポンシブ対応とは異なるので、ここにさらにカスタマイズを加えようとすると、一筋縄ではいかないのかもしれないですね。
とりあえず10分くらい触ってみた時に気が付いた事でした。