[6.x]: Control panel: layout shift and nested scrollbars

クローズ
  • 何か問題がありますか？
#20,011 コメント 1 件 リアクション 0 件 担当者 0 名 GitHub で見る

メンテナーはふだん 1 日以内に返信

まだ誰も着手していません。

評価

難易度
4/5
見積もり時間
3〜5日
初心者へのやさしさ
48/100
issue の種類
バグ
明瞭さ
おおむね明確
活発さ
活発
技術スタック
css, php
領域
accessibility, frontend

調査の方向性

Start by comparing the control panel layout styles in Craft 6 with the body width behavior described for Craft 5, then inspect the nav, .cp-details pane, and details panel body scrollbar rules. Reproduce the page and pane shifts on a system with non-overlay scrollbars, including a short entry edit window. Done when the selected scrollbar behavior prevents the reported shifts and makes the nested scroll regions usable; the issue leaves the choice between two fixes open.

索引モデルが issue の本文から書いたものです。

説明

bug repo:cms
What happened?
Description

Two scrollbar issues in the control panel, with two possible fixes. Related: #20009

Now Fix 1 Fix 2
Image Image Image
Layout shift

This affects browsers where scrollbars take up space in the layout (Windows, Linux, and macOS with "Show scroll bars: Always"). With overlay scrollbars, the default on macOS and mobile, nothing shifts.

The page content moves sideways by the width of the scrollbar (about 15px) when the page scrollbar appears or disappears, for example when switching tabs on an entry edit page. Craft 5 has body { width: 100vw }, Craft 6 has 100%.

The scrolling panel body inside the details pane doesn't have a scrollbar-gutter: stable to stabilize it (unlike the nav and the .cp-details details pane itself ).

In the recording below both shifts (pane and page) are demonstrated.

https://github.com/user-attachments/assets/c0e342f6-5377-4482-a7dd-be877163a57d

Nested scroll regions

With non-overlay scrollbars, a short window on an entry edit page can show three scrollbars at once: the page, the nav and the details panel. It's hard to tell which one the wheel or the arrow keys will scroll. Mostly a usability problem, but it's worse for keyboard and magnifier users.

Other than the possible usability concerns it does look a bit noisy and it was even mentioned on CraftQuest's latest video where the new UI was demonstrated.

Fix 1
  • body { width: 100vw }, with an inline-end guard the width of the scrollbar so nothing ends up under it
  • thin inner scrollbars whose thumb keeps 3:1 contrast (the stock one is about 1.7:1), plus, optionaly, overscroll-behavior: contain
  • scrollbar-gutter: stable on the details panel body

https://github.com/user-attachments/assets/42ef7e6f-53a5-452f-bbb2-b4b2b8077464

Fix 2

Fix 1, plus hiding the inner scrollbars (nav, details panel) until hover or focus, with a fade at the edge where there is more to scroll. The scrollbar space stays reserved, so nothing shifts when it appears. The page scrollbar stays visible. This is the cleaner option from a purely visual standpoint.

Downsides: no scrollbar at rest to show position or to grab. The nav on Craft 5 though did indeed hide its scrollbar.

https://github.com/user-attachments/assets/49160c0b-3958-4877-be8d-0bffadfc8bb5

Craft CMS version

6.x-dev (4d5bbd29)

PHP version

No response

Operating system and version

No response

Database type and version

No response

Image driver and version

No response

Installed plugins and versions
主要言語
PHP
スター
3.6k
フォーク
712
平均マージ
13時間 8分
マージ済み PR（30日）
366

環境構築

はじめの一歩

  1. issue を最後まで読み、次にプロジェクトのコントリビューションガイドを読みます。
  2. 着手することを issue にコメントします — 二人が同じ作業をするのを防げます。
  3. リポジトリをフォークし、ブランチを切って変更します。
  4. issue 番号を参照したプルリクエストを送ります。

craftcms/cms のほかの issue

craftcms/cms の issue をすべて見る

似ている issue

PHP の issue をもっと見る

新しい issue をメールで受け取る

初心者向けの GitHub issue を短くまとめたダイジェスト。