vinzenz/wutzcalc
Watch
0
0
Fork
You've already forked wutzcalc
 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

tablet: fix cart scroll — flex-end + overflow-y:auto doesn't scroll in WebKit

Browse source 
Follow-up to the #39 fix in d274275, which mara reports still doesn't
scroll in practice.

The bug: overflow-y: auto and justify-content: flex-end on the *same* flex
column is a known WebKit/Safari interop gap — the flex-end-justified
overflow gets clipped at the container bounds instead of becoming a
scrollable region, so nothing actually changed from the user's side despite
the CSS being 'correct' per spec. This app targets iOS Safari 12+
(vite.config.ts legacy targets), squarely in the affected range.

Fix: split the concerns onto two elements. .cart-items is now a plain
overflow-y: auto scroll container with no alignment property. The new
inner .cart-items-inner wrapper carries display:flex/flex-direction:column/
justify-content:flex-end, with min-height: 100% (a floor, not a fixed
height) so it still bottom-anchors a short list but grows past 100% and
scrolls normally in the outer container once content overflows it.

Build clean.
This commit is contained in:
iris 2026-07-30 12:17:15 +02:00
commit cb316d16d1
2 changed files with 48 additions and 32 deletions
Download patch file Download diff file Expand all files Collapse all files

14
client/src/styles.css
View file

@ -213,11 +213,25 @@ button.danger { background: #5a2a2a; border-color: #7a3a3a; color: #fff; }
flex-direction: column;
min-height: 0;
}
/* #39 follow-up: overflow-y: auto directly on a flex column that also has
justify-content: flex-end doesn't reliably scroll in WebKit/Safari (the
iOS 12+ targets this app builds for) — the flex-end-justified overflow
gets clipped instead of becoming a scrollable region, so from the user's
side it looked identical to the original overflow: hidden bug. Standard
workaround: the overflow/scroll and the flex-end alignment can't live on
the same element — .cart-items is now a plain scroll container (no
justify-content), and .cart-items-inner is the flex column that actually
bottom-anchors short lists via min-height: 100% (a floor, not a fixed
height, so it still grows past 100% and scrolls normally once content
overflows it). */
.cart-items {
flex: 1 1 0;
min-height: 0;
overflow-y: auto;
margin-bottom: 6px;
}
.cart-items-inner {
min-height: 100%;
display: flex;
flex-direction: column;
justify-content: flex-end;