Corregge il rendering sfasato del tesseramento su iOS.
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>
This commit is contained in:
@@ -58,7 +58,10 @@ export function BarraSottosezioni({
|
|||||||
|
|
||||||
return (
|
return (
|
||||||
<div>
|
<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
|
<div
|
||||||
role="tablist"
|
role="tablist"
|
||||||
aria-label="Sottosezioni"
|
aria-label="Sottosezioni"
|
||||||
@@ -111,6 +114,10 @@ export function BarraSottosezioni({
|
|||||||
initial={ridotto ? { opacity: 0 } : { opacity: 0, x: direzione.current * 20 }}
|
initial={ridotto ? { opacity: 0 } : { opacity: 0, x: direzione.current * 20 }}
|
||||||
animate={{ opacity: 1, x: 0 }}
|
animate={{ opacity: 1, x: 0 }}
|
||||||
transition={ridotto ? { duration: 0.1 } : transizioneTab}
|
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"
|
className="touch-pan-y px-5 py-4"
|
||||||
>
|
>
|
||||||
<h2 className="mb-3 font-display-sm text-lg uppercase">{voce.label}</h2>
|
<h2 className="mb-3 font-display-sm text-lg uppercase">{voce.label}</h2>
|
||||||
|
|||||||
Reference in New Issue
Block a user