Elementorはくせつよなプラグインなので使いたくないのですが、世界的なシェアは圧倒的なので長いものには巻かれないといけない今日この頃です。
Elementorで制作されたサイトの固定ページをElementorで編集する際に、レスポンシブモードでタブレットサイズにすると、エディタ上のデザインが崩れてしまいました。
原因がわかるまで小一時間かかりましたので、メモしておきたいと思います。
原因：必要なCSSのmedia queryの条件にマッチしていない
Dualモニター環境で、Retinaディスプレイと非Retinaのディスプレイで確認したところ、非Retinaでは正常に表示されるが、Retinaではデザインが崩れます。
両者を比べることができたので、たまたま原因に気が付けました。
正常に表示されるときは、media queryのタブレットサイズのCSSが当たっていますが、表示されない時はそのCSSが当たっていませんでした。
画面サイズを1px大きくするとmedia queryが反応して正常に表示されるようになりました。
また、この不具合現象は、Retina Dispalyの時は発生して、非Retinaの時は発生しませんでした。
このようなことから、media queryの画面サイズ判定が上手くいってないことになりますので、ElementorのCSSに問題があるということになります。
Elementorではよく知られた問題らしい？
Elementorのbreakpointの1px Gap問題としてissueが上がっていますが、根本的な解決はなされていないようです。
つまるところ、Retina環境だと小数点が出てしまうのでmedia queryの条件判定がおかしくなるということだと思います。
解決策
今回の現象は、Retina Displayと非Retinaの違いでも発生しますが、ブラウザのZoomの倍率でも発生します。
ブラウザのZoomがデフォルトになっているか確認します。
具体的には、Zoomを100%に戻しましょう。
Chromeの場合は、Ctrl++/-でZoom up / downできます。
まとめ
Elementorはユーザーが多いので、いろんな条件をテストする必要がありますが、基本的にはデフォルトで問題なければ、それで使えと言われておしまいな気がします。
今後も直すつもりはないでしょう。
Elementorのレスポンシブモードの表示が崩れたら、ブラウザZoomを疑えというお話でした。
