CSS LAYOUT STABILITY

scrollbar-gutterで、モーダル表示時の横ズレを防ぐ

bodyのスクロールを止めた時に、スクロールバー分の幅が消えて背景がガタッと動くことがあります。 先にgutterを確保しておくと、レイアウトが安定します。

Compare モーダルを開くと、左だけ背景が横にズレます
Without gutter 背景がガタッと動く
Dashboard
Monthly report Revenue Overview
With stable gutter 背景が動かない
Dashboard
Monthly report Revenue Overview
Core CSS 
html {
  scrollbar-gutter: stable;
}

body.is-modal-open {
  overflow: hidden;
}
Point

スクロールバーが消える前提のUIでは、先にgutterを確保しておくと背景レイアウトが動きにくくなります。