From a5e627a57bd7744bf6949fc78d1c0292bb553721 Mon Sep 17 00:00:00 2001
From: Davide Grilli <davide.grilli@outlook.com>
Date: Sat, 5 Sep 2026 23:12:20 +0200
Subject: [PATCH] Corregge il rendering sfasato del tesseramento su iOS.
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Il pannello delle sottosezioni è trascinabile: Motion gli lasciava
`will-change: transform` in permanenza e su iOS il sottoalbero finiva in un
layer composito. Sul tab Tesseramento, il più alto, il layer supera il tile di
WebKit e il contenuto veniva ridipinto a fasce sfalsate.

Disattiva la gestione automatica del will-change e toglie il backdrop-blur
dalla barra tab: non è sticky, quindi non sfocava nulla, ma il backdrop root
forzava il rendering a layer degli antenati.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
---
 src/components/crapp/BarraSottosezioni.tsx | 9 ++++++++-
 1 file changed, 8 insertions(+), 1 deletion(-)

diff --git a/src/components/crapp/BarraSottosezioni.tsx b/src/components/crapp/BarraSottosezioni.tsx
index 9135ef0..b8172dc 100644
--- a/src/components/crapp/BarraSottosezioni.tsx
+++ b/src/components/crapp/BarraSottosezioni.tsx
@@ -58,7 +58,10 @@ export function BarraSottosezioni({
 
   return (
     <div>
-      <div className="border-b border-border bg-background/80 pt-3 backdrop-blur-md">
+      {/* Niente backdrop-blur: la barra non è sticky, quindi non sfoca nulla, ma su
+          iOS il backdrop root forza il rendering a layer degli antenati e sporca il
+          pannello alto qui sotto. */}
+      <div className="border-b border-border bg-background pt-3">
         <div
           role="tablist"
           aria-label="Sottosezioni"
@@ -111,6 +114,10 @@ export function BarraSottosezioni({
           initial={ridotto ? { opacity: 0 } : { opacity: 0, x: direzione.current * 20 }}
           animate={{ opacity: 1, x: 0 }}
           transition={ridotto ? { duration: 0.1 } : transizioneTab}
+          // iOS: il will-change automatico di Motion promuove il pannello a layer
+          // composito. Sui tab lunghi (Tesseramento) supera il tile di WebKit e il
+          // contenuto viene ridisegnato a fasce sfalsate. "auto" disattiva la gestione.
+          style={{ willChange: "auto" }}
           className="touch-pan-y px-5 py-4"
         >
           <h2 className="mb-3 font-display-sm text-lg uppercase">{voce.label}</h2>