Skip to content

Fix intermittent portfolio scroll trapping #28

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
ted0103 merged 1 commit into from
Aug 31, 2026
Merged

Fix intermittent portfolio scroll trapping #28

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
9 changes: 9 additions & 0 deletions scripts/verify.mjs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -107,6 +107,15 @@ const productionCss = (await Promise.all(css)).join('\n');
if (productionCss.includes('fonts.googleapis.com') || productionCss.includes('fonts.gstatic.com')) {
throw new Error('Production CSS must not request third-party fonts');
}
if (productionCss.includes('overscroll-behavior-inline:contain')) {
throw new Error('Horizontal rails must not trap trackpad scroll chaining');
}
if (!productionCss.includes('touch-action:pan-x pan-y pinch-zoom')) {
throw new Error('Horizontal rails must explicitly preserve both scroll axes');
}
if (!productionCss.includes('@media (hover:hover) and (pointer:fine)') || !productionCss.includes('scroll-snap-type:none')) {
throw new Error('Fine-pointer rails must not use scroll snapping');
}

async function htmlFiles(directory) {
const files = [];
Expand Down
11 changes: 10 additions & 1 deletion src/styles/store-preview.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -171,6 +171,13 @@ html.store-theme body {
.store-categories::-webkit-scrollbar,
.store-project-rail::-webkit-scrollbar,
.store-story-rail::-webkit-scrollbar { display: none; }
.store-categories,
.store-home .project-grid,
.store-project-rail,
.store-story-rail {
overscroll-behavior: auto;
touch-action: pan-x pan-y pinch-zoom;
}
.store-categories a {
display: grid;
justify-items: center;
Expand Down Expand Up @@ -236,7 +243,6 @@ html.store-theme body {
gap: 20px;
padding: 4px 24px 28px 0;
overflow-x: auto;
overscroll-behavior-inline: contain;
scroll-snap-type: inline proximity;
scrollbar-width: none;
}
Expand Down Expand Up @@ -748,6 +754,9 @@ html.store-theme body {
.store-home a:active { transform: scale(.98); }

@media (hover: hover) and (pointer: fine) {
.store-home .project-grid,
.store-project-rail,
.store-story-rail { scroll-snap-type: none; }
.store-route-actions a:hover { transform: translateY(-2px); filter: brightness(.97); }
.store-project-detail .button:hover { transform: translateY(-2px); filter: brightness(.94); }
.store-contact .contact-action:hover { transform: translateY(-3px); background: white; box-shadow: 0 14px 34px rgba(0, 0, 0, .1); }
Expand Down
Loading