macOS 上での Chrome の「全画面表示でツールバーを常に表示する」に関する挙動メモ

Chrome をフルスクリーンで使う際に、ツールバー（タブやアドレスバーなど）の表示に関する動作が期待通りにならず苦労しました。完全な解決はできていないので、どんな設定をするとどんな挙動になったのか、スクリーンショット付きでメモを残しておきます。

:::note warn
本記事で言及した挙動は後に改善され、特段設定しなくても期待通りの動作になりました。
「以前はこうだったんだ」程度にご覧ください。
:::

## 試した環境のバージョン

- macOS Monterey 12.6
- Google Chrome 106.0.5249.119

## TL;DR

- 「全画面表示でツールバーを常に表示する」を on にすると、 macOS のメニューバーが表示されたときにweb画面全体が押し下げられてしまいます
	- タブを切り替える際にカーソルを画面上部に移動させすぎるとよく引っかかります
	- 「フルスクリーンでメニューバーを自動的に表示/非表示」を off （＝常に表示）にすればweb画面の押し下げを防げます
- 「全画面表示でツールバーを常に表示する」を off にすると、画面上部にカーソルを持っていってもツールバーが表示されません
	- この状態だとアドレスバーに関しては全く操作できません

## 設定毎の動作
以下の各設定の on/off の組み合わせを試しました。

- Chrome メニューバー > 表示 > 全画面表示でツールバーを常に表示する
- システム環境設定 > Dock とメニューバー > フルスクリーンでメニューバーを自動的に表示/非表示
	- macOS 全体の設定なので、 Chrome 以外のアプリにも影響が出ます。
	- この設定は新たにフルスクリーンにする画面から反映されるようです。

![screenshot 2022-10-14 18.19.02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/857667/32923219-23e7-c627-6067-2a2a4f8aa5a6.png)

![screenshot 2022-10-14 18.20.21.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/857667/a5cc926d-9da3-99bc-5325-741a56595f5b.png)

### ツールバー常時：on / メニューバー自動：on
個人的に一番使いたい形態なのですが、とある挙動に困っています。

下のスクリーンショットは、左が通常の状態、右がカーソルを画面上部に持っていってメニューバーを出した（あるいは意図せず出てしまった）状態です。メニューバー（とウィンドウバー）の分だけ**web画面全体が押し下げられています**。

![chrome-01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/857667/584e39d6-f37d-7007-aed1-c0c13de1a6ce.png)

画面全体の表示が変わるため視覚的に余計な刺激があり、地味に辛いです。
（ちなみに Firefox や Safari で同じことをすると、ツールバーだけ押し下げられweb画面は動きませんでした。）

同じことで困っている人たちは、他のブラウザに移ったりフルスクリーン利用をやめたりしているようです。

https://www.reddit.com/r/macbookpro/comments/sbwlsw/chrome_resizing_in_full_screen_mode_when_i_hover/

<!-- https://apple.stackexchange.com/questions/337254 -->

日本語での質問がコミュニティにも上がっていました。

https://support.google.com/chrome/thread/8710657?hl=ja

### ツールバー常時：off / メニューバー自動：on
最も画面を広く使える組み合わせです。また、メニューバーを表示しても前節のweb画面全体が押し下げられる問題は発生しません。

ただ、「全画面表示でツールバーを常に表示する」を off にすると、**画面上部にカーソルを持っていってもツールバーが表示されませんでした**。タブ操作はショートカットキーやメニューバーなどで代用できるのですが、アドレス操作に関しては方法が見つかりませんでした（ Chrome 拡張機能で解決する手はあるそうです）。

![chrome-02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/857667/22297a78-44e6-8efd-255d-1a20df2c5b31.png)

昔はこの設定でもカーソルを持っていってツールバーが表示されたらしいのですが、もう当時の動作に戻す隠しフラグも削除されています。

https://superuser.com/questions/1368977

### ツールバー常時：on / メニューバー自動：off
メニューバーの出現の影響を受けないよう、メニューバーを常に表示するようにしてみました。これも、ウィンドウバーが出るときでもweb画面全体が押し下げられる問題は発生しません。

ツールバーもメニューバーも表示されたままなので、 web 画面の領域が最も狭くなります。ウィンドウを「拡大」した場合と大差ありませんが、フルスクリーンであるため新しい画面が自動で用意される点は便利に感じました。一方で他のアプリのフルスクリーンにもメニューバーが表示される点に注意が必要です。

![chrome-03.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/857667/c4781ee9-a940-2f5f-f0fa-c54350bd8f12.png)

### ツールバー常時：off / メニューバー自動：off
残った組み合わせも試してみましたが、ツールバーが一切表示されなくなる点は同じでした。

![chrome-04.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/857667/350e073a-1d5e-c020-fc08-2f8eaafd4763.png)

## 私の対策
どう対策するかは個人の好みが関わってくるので、参考程度に。 Chrome にこだわらないのならブラウザを変えるのが楽だと思います。

- メニューバーは自動にしておく（常に表示させると仮想マシンのフルスクリーンで少し問題があったので仕方なく）
- ツールバーを触ることが多い作業時は、ウィンドウをフルスクリーンにせず「拡大」で済ませる
- フルスクリーンではツールバー（特にタブ）を極力カーソルで触らず、[キーボードショートカット](https://support.google.com/chrome/answer/157179?hl=ja)で操作する
	- 1画面に集中する際はツールバーを隠しておく (command + shift + F)
	- タブをカーソルで選択したいときは「タブを検索」 (command + shift + A) を出す ※ ツールバー非表示時も可能
	- アドレスバーを操作したいときは command + L でフォーカスする

---

## 新しい Chrome での動作
本記事を投稿したことも忘れたあるとき、全画面表示でメニューバーが表示されるとブラウザ（のタブ部分）に覆いかぶさるようになりました。 Chrome の更新か macOS の更新かはわかりませんが、これでweb画面全体が動くことはなくなり、目の負担はとても軽くなりました。

そしてさらに後になって、 Firefox や Safari と同様に**ツールバーだけ押し下げられるようになりました**。これでメニューバーがタブの上半分を隠すこともなくなり、メニューバーが出てしまってもそのまま操作しやすくなりました。

とても嬉しかったので、以下に新しいスクリーンショットを添付します。

<details><summary>Google Chrome 128.0.6613.120 （クリックして展開）</summary><div>

### ツールバー常時：on / メニューバー自動：on
前述の通り、メニューバーに合わせてツールバーだけ押し下げられるようになりました。また、細かい点ではウィンドウバーが出ないようになりました（ボタンは左上のスペースに現れます）。

![chrome-20240903-01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/857667/710755f8-07ba-57f9-70ad-20243cfc7ed3.png)

### ツールバー常時：off / メニューバー自動：on
ツールバーが表示されるようになりました。

![chrome-20240903-02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/857667/3d48ad1a-ed85-3aa7-06d1-0d3f803326a8.png)

### ツールバー常時：on / メニューバー自動：off
あまり変化はありませんが、ウィンドウバーが出なくなったことでタブが隠れなくなりました。

![chrome-20240903-03.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/857667/39f4699b-daa2-9655-e148-9878ad7fff8c.png)

### ツールバー常時：off / メニューバー自動：off
こちらもツールバーが表示されるようになりました。

![chrome-20240903-04.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/857667/13c3dbb3-8da3-8258-6c53-5ee840d4f70c.png)

</div></details>