marcel/mealprep
1
0
Fork 0
Code Issues 22 Pull Requests Actions Packages Projects Releases Wiki Activity

fix(planner): prevent front face bleeding through flipped card

Browse Source 
overflow:hidden on direct children of preserve-3d flattens the 3D
context in Chrome, causing backface-visibility:hidden to fail.

Move border-radius + overflow to inner wrapper divs (.card-front-inner,
.card-back-inner) and keep the face elements themselves free of those
properties. Also add -webkit-backface-visibility:hidden and
will-change:transform for consistent GPU compositing.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Marcel Raddatz
2026-04-10 12:47:10 +02:00
parent 8679ebc6e3
commit a43a8ec33f
1 changed files with 22 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

27
frontend/src/lib/planner/DesktopDayTile.svelte
View File

@@ -126,10 +126,11 @@
<div class="card" class:flipped={isFlipped}> <div class="card" class:flipped={isFlipped}>
<!-- FRONT --> <!-- FRONT -->
<div <div class="card-front">
class="card-front" <div
style="background: {gradientBackground}; background-size: cover; background-position: center;" class="card-front-inner"
> style="background: {gradientBackground}; background-size: cover; background-position: center;"
>
<!-- Full-tile dual gradient overlay --> <!-- Full-tile dual gradient overlay -->
<div class="tile-overlay"></div> <div class="tile-overlay"></div>
@@ -157,10 +158,12 @@
</div> </div>
{/if} {/if}
</div> </div>
</div> <!-- /.card-front-inner -->
</div> </div>
<!-- BACK --> <!-- BACK -->
<div class="card-back" aria-hidden={!isFlipped}> <div class="card-back" aria-hidden={!isFlipped}>
<div class="card-back-inner">
<button <button
type="button" type="button"
aria-label="Schließen" aria-label="Schließen"
@@ -199,6 +202,7 @@
{/if} {/if}
{/if} {/if}
</div> </div>
</div> <!-- /.card-back-inner -->
</div> </div>
</div> </div>
@@ -254,6 +258,7 @@
transform-style: preserve-3d; transform-style: preserve-3d;
transition: transform 0.45s cubic-bezier(0.4, 0, 0.2, 1); transition: transform 0.45s cubic-bezier(0.4, 0, 0.2, 1);
border-radius: 10px; border-radius: 10px;
will-change: transform;
} }
.card.flipped { .card.flipped {
transform: rotateY(180deg); transform: rotateY(180deg);
@@ -263,6 +268,13 @@
position: absolute; position: absolute;
inset: 0; inset: 0;
backface-visibility: hidden; backface-visibility: hidden;
-webkit-backface-visibility: hidden;
/* border-radius and overflow on inner wrappers, not here —
overflow:hidden on preserve-3d children flattens the 3D context */
}
.card-front-inner {
position: absolute;
inset: 0;
border-radius: 10px; border-radius: 10px;
overflow: hidden; overflow: hidden;
} }
@@ -359,10 +371,15 @@
/* ── Back face ── */ /* ── Back face ── */
.card-back { .card-back {
transform: rotateY(180deg); transform: rotateY(180deg);
}
.card-back-inner {
position: absolute;
inset: 0;
border-radius: 10px;
overflow-y: auto;
background: var(--color-page); background: var(--color-page);
border: 1px solid var(--color-border); border: 1px solid var(--color-border);
padding: 10px; padding: 10px;
overflow-y: auto;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
} }