修复游玩页启动面板居中溢出导致顶部内容滚不到
- .game-player-launch 纵向对齐由 center 改为 safe center(保留 center 作旧浏览器回退),溢出时退回 start,不再把标题裁到 scrollTop=0 也够不到的位置 - 同步修正 ≤820px 与 max-height:26rem 两处媒体查询里的 align-content - 把 overflow-y: auto 提到 .game-player-launch 基础规则,启动卡片成为唯一的内部滚动兜底,页面与 .platform-tab-panel 仍保持 overflow:hidden - pitfalls 记录该故障模式(居中溢出叠加内部滚动会让负方向那半不可达)与真实 Chromium 夹具判据 - 里程碑文档补上 safe center 口径与取证说明
This commit is contained in:
@@ -551,7 +551,14 @@
|
||||
inset: 0;
|
||||
display: grid;
|
||||
grid-template-columns: minmax(8rem, 15rem) minmax(0, 1fr);
|
||||
/*
|
||||
* safe:内容比容器高时退回 start,配合下面的兜底滚动,顶部标题与「开始游戏」
|
||||
* 都不会像居中溢出那样被裁到滚不到的位置。
|
||||
* 启动卡片是唯一允许内部滚动的兜底,页面与面板本身始终不滚动。
|
||||
*/
|
||||
align-items: center;
|
||||
align-items: safe center;
|
||||
overflow-y: auto;
|
||||
gap: clamp(1.1rem, 4vw, 2.8rem);
|
||||
padding: clamp(1rem, 4vw, 2.5rem);
|
||||
background: linear-gradient(135deg, #1e1820, #302329);
|
||||
@@ -700,7 +707,9 @@
|
||||
}
|
||||
.game-player-launch {
|
||||
grid-template-columns: 1fr;
|
||||
/* safe:内容比容器高时退回 start,避免居中把顶部标题裁到滚不到的地方。 */
|
||||
align-content: center;
|
||||
align-content: safe center;
|
||||
gap: 1rem;
|
||||
text-align: center;
|
||||
}
|
||||
@@ -727,11 +736,12 @@
|
||||
@media (max-height: 26rem) {
|
||||
.game-player-launch {
|
||||
grid-template-columns: minmax(0, 1fr);
|
||||
/* 单行布局下由 align-content 决定纵向位置,同样必须用 safe。 */
|
||||
align-content: center;
|
||||
align-content: safe center;
|
||||
gap: 0.5rem;
|
||||
padding: 0.75rem 1rem;
|
||||
text-align: center;
|
||||
overflow-y: auto;
|
||||
}
|
||||
.game-player-launch .game-cover {
|
||||
display: none;
|
||||
|
||||
Reference in New Issue
Block a user