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/css/components/hero.css | 2 ++ assets/js/matrix-rain.js | 7 ++++--- 2 files changed, 6 insertions(+), 3 deletions(-) diff --git a/assets/css/components/hero.css b/assets/css/components/hero.css index b9ecb24..d6cd3c0 100644 --- a/assets/css/components/hero.css +++ b/assets/css/components/hero.css @@ -28,6 +28,8 @@ inset: 0; opacity: 0.13; pointer-events: none; + z-index: 1; + display: block; } html.theme-light #matrix-canvas { 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