daniel/deepdrft
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 13 Wiki Activity

fix(parallax): drive --parallax-pos via CSS scroll animation to kill SSR/hydration position pop

Browse Source
This commit is contained in:
daniel-c-harvey
2026-06-11 11:57:43 -04:00
parent 16f356a760
commit 91566692f6
2 changed files with 59 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files
DeepDrftShared.Client/Components/ParallaxImage.razor.cs
+20 -4
View File
@@ -78,7 +78,7 @@ public abstract class ParallaxImageBase : ComponentBase, IAsyncDisposable
[Parameter] public string? Class { get; set; }
protected ElementReference WindowRef;
protected string WindowStyle { get; private set; } = "--window-height: 300px; --parallax-pos: 0%;";
protected string WindowStyle { get; private set; } = "--window-height: 300px; --parallax-from: 0%; --parallax-to: 50%;";
private bool AspectRatioMode =>
WindowHeight is null && NaturalWidth is > 0 && NaturalHeight is > 0;
@@ -86,11 +86,27 @@ public abstract class ParallaxImageBase : ComponentBase, IAsyncDisposable
private IJSObjectReference? _module;
private string? _handle;
// --parallax-from/--parallax-to are inherited custom properties read by the
// CSS @keyframes parallax-pan (scroll-driven animation on .parallax-window).
// They encode ParallaxSpeed and InvertDirection. --parallax-pos itself is
// never set inline — an inline value would beat the CSS animation in the
// cascade and defeat the pre-WASM scroll-driven parallax. JS sets it inline
// only after WASM boots, transparently taking over (inline > animation).
private string ParallaxVars()
{
var end = (int)Math.Round(ParallaxSpeed * 100);
end = Math.Max(1, end); // floor at 1% so the property is always valid
return InvertDirection
? $"--parallax-from: {end}%; --parallax-to: 0%;"
: $"--parallax-from: 0%; --parallax-to: {end}%;";
}
protected override void OnParametersSet()
{
var pv = ParallaxVars();
if (WindowHeight != null)
{
WindowStyle = $"--window-height: {WindowHeight}; --parallax-pos: 0%;";
WindowStyle = $"--window-height: {WindowHeight}; {pv}";
}
else if (AspectRatioMode)
{
@@ -99,11 +115,11 @@ public abstract class ParallaxImageBase : ComponentBase, IAsyncDisposable
// aspect-ratio: W / (H * fraction) → window is WindowHeightFraction
// of the image's full display height at container width.
var h = Math.Max(1, (int)Math.Round(NaturalHeight!.Value * WindowHeightFraction));
WindowStyle = $"height: auto; aspect-ratio: {NaturalWidth!.Value} / {h}; --parallax-pos: 0%;";
WindowStyle = $"height: auto; aspect-ratio: {NaturalWidth!.Value} / {h}; {pv}";
}
else
{
WindowStyle = "--window-height: 300px; --parallax-pos: 0%;";
WindowStyle = $"--window-height: 300px; {pv}";
}
}