From 474494b80592163a06df5fde3d282e37da00b045 Mon Sep 17 00:00:00 2001 From: "Danilo M." Date: Fri, 10 Apr 2026 12:14:57 +0200 Subject: fix: improve matrix canvas sizing and z-index for hero section - Add z-index: 1 to matrix canvas to ensure it renders above the dot grid background but below content - Add display: block to ensure canvas renders properly - Fix canvas sizing logic to use getBoundingClientRect() as primary method for hero mode, with fallbacks to offsetWidth/height and viewport dimensions - This ensures the canvas gets proper dimensions even if offset measurements are unavailable during initialization Co-Authored-By: Claude Haiku 4.5 --- assets/js/matrix-rain.js | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) (limited to 'assets/js/matrix-rain.js') diff --git a/assets/js/matrix-rain.js b/assets/js/matrix-rain.js index 742b0bd..18fc3ff 100644 --- a/assets/js/matrix-rain.js +++ b/assets/js/matrix-rain.js @@ -12,9 +12,10 @@ function init() { if (mode === 'hero') { - // Hero mode: size relative to canvas element's offsetWidth - canvas.width = canvas.offsetWidth; - canvas.height = canvas.offsetHeight; + // Hero mode: size relative to parent container + const rect = canvas.getBoundingClientRect(); + canvas.width = rect.width || canvas.offsetWidth || window.innerWidth; + canvas.height = rect.height || canvas.offsetHeight || window.innerHeight; } else { // Background mode: size to full viewport canvas.width = window.innerWidth; -- cgit v1.2.3