fixes

src/content/Backgrounds/Aurora/Aurora.vue

@@ -1,5 +1,5 @@
 <template>
-  <div ref="containerRef" :class="className" :style="style" class="w-full h-full"></div>
+  <div ref="containerRef" :class="className" :style="style" class="relative"></div>
 </template>
 
 <script setup lang="ts">
@@ -162,8 +162,13 @@ const initAurora = () => {
 
   const resize = () => {
     if (!container) return
-    const width = container.offsetWidth
-    const height = container.offsetHeight
+
+    const parentWidth = container.parentElement?.offsetWidth || container.offsetWidth || window.innerWidth
+    const parentHeight = container.parentElement?.offsetHeight || container.offsetHeight || window.innerHeight
+
+    const width = Math.max(parentWidth, 300)
+    const height = Math.max(parentHeight, 300)
+
     renderer!.setSize(width, height)
     if (program) {
       program.uniforms.uResolution.value = [width, height]
@@ -189,7 +194,7 @@ const initAurora = () => {
       uTime: { value: 0 },
       uAmplitude: { value: props.amplitude },
       uColorStops: { value: colorStopsArray },
-      uResolution: { value: [container.offsetWidth, container.offsetHeight] },
+      uResolution: { value: [Math.max(container.parentElement?.offsetWidth || container.offsetWidth || window.innerWidth, 300), Math.max(container.parentElement?.offsetHeight || container.offsetHeight || window.innerHeight, 300)] },
       uBlend: { value: props.blend },
       uIntensity: { value: props.intensity },
     },
@@ -201,6 +206,9 @@ const initAurora = () => {
   gl.canvas.style.width = '100%'
   gl.canvas.style.height = '100%'
   gl.canvas.style.display = 'block'
+  gl.canvas.style.position = 'absolute'
+  gl.canvas.style.top = '0'
+  gl.canvas.style.left = '0'
 
   const update = (t: number) => {
     animateId = requestAnimationFrame(update)
@@ -263,4 +271,22 @@ watch(
     initAurora()
   }
 )
-</script>
+</script>
+
+<style scoped>
+div {
+  position: absolute !important;
+  top: 0 !important;
+  left: 0 !important;
+  width: 100% !important;
+  height: 100% !important;
+}
+
+:deep(canvas) {
+  position: absolute !important;
+  top: 0 !important;
+  left: 0 !important;
+  width: 100% !important;
+  height: 100% !important;
+}
+</style>

src/content/Backgrounds/LetterGlitch/LetterGlitch.vue

@@ -1,6 +1,6 @@
 <template>
-  <div class="relative w-full h-full overflow-hidden">
-    <canvas ref="canvasRef" class="block w-full h-full" />
+  <div class="relative overflow-hidden">
+    <canvas ref="canvasRef" class="absolute top-0 left-0 w-full h-full" />
     <div v-if="outerVignette"
       class="absolute top-0 left-0 w-full h-full pointer-events-none bg-[radial-gradient(circle,_rgba(0,0,0,0)_60%,_rgba(0,0,0,1)_100%)]" />
     <div v-if="centerVignette"
@@ -112,19 +112,24 @@ const resizeCanvas = () => {
   if (!parent) return
 
   const dpr = window.devicePixelRatio || 1
-  const rect = parent.getBoundingClientRect()
+  
+  const parentWidth = parent.parentElement?.offsetWidth || parent.offsetWidth || window.innerWidth
+  const parentHeight = parent.parentElement?.offsetHeight || parent.offsetHeight || window.innerHeight
+  
+  const width = Math.max(parentWidth, 300)
+  const height = Math.max(parentHeight, 300)
 
-  canvas.width = rect.width * dpr
-  canvas.height = rect.height * dpr
+  canvas.width = width * dpr
+  canvas.height = height * dpr
 
-  canvas.style.width = `${rect.width}px`
-  canvas.style.height = `${rect.height}px`
+  canvas.style.width = `${width}px`
+  canvas.style.height = `${height}px`
 
   if (context.value) {
     context.value.setTransform(dpr, 0, 0, dpr, 0, 0)
   }
 
-  const { columns, rows } = calculateGrid(rect.width, rect.height)
+  const { columns, rows } = calculateGrid(width, height)
   initializeLetters(columns, rows)
   drawLetters()
 }
@@ -243,4 +248,22 @@ watch([() => props.glitchSpeed, () => props.smooth], () => {
   }
   animate()
 })
-</script>
+</script>
+
+<style scoped>
+div {
+  position: absolute !important;
+  top: 0 !important;
+  left: 0 !important;
+  width: 100% !important;
+  height: 100% !important;
+}
+
+:deep(canvas) {
+  position: absolute !important;
+  top: 0 !important;
+  left: 0 !important;
+  width: 100% !important;
+  height: 100% !important;
+}
+</style>

src/content/Backgrounds/Lightning/Lightning.vue

@@ -1,5 +1,5 @@
 <template>
-  <canvas ref="canvasRef" class="w-full h-full block mix-blend-screen"></canvas>
+  <canvas ref="canvasRef" class="w-full h-full block mix-blend-screen relative"></canvas>
 </template>
 
 <script setup lang="ts">
@@ -134,10 +134,38 @@ const initWebGL = () => {
 
   const resizeCanvas = () => {
     const rect = canvas.getBoundingClientRect()
-    canvas.width = rect.width
-    canvas.height = rect.height
-    canvas.style.width = rect.width + 'px'
-    canvas.style.height = rect.height + 'px'
+    const dpr = window.devicePixelRatio || 1
+    
+    let width = rect.width
+    let height = rect.height
+    
+    let parent = canvas.parentElement
+    while (parent && (!width || !height)) {
+      if (parent.offsetWidth && parent.offsetHeight) {
+        width = parent.offsetWidth
+        height = parent.offsetHeight
+        break
+      }
+      parent = parent.parentElement
+    }
+    
+    if (!width || !height) {
+      width = window.innerWidth
+      height = window.innerHeight
+    }
+    
+    width = Math.max(width, 300)
+    height = Math.max(height, 300)
+    
+    canvas.width = width * dpr
+    canvas.height = height * dpr
+    
+    canvas.style.width = '100%'
+    canvas.style.height = '100%'
+    canvas.style.display = 'block'
+    canvas.style.position = 'absolute'
+    canvas.style.top = '0'
+    canvas.style.left = '0'
   }
 
   resizeCanvas()
@@ -234,3 +262,16 @@ watch(
   () => {}
 )
 </script>
+
+<style scoped>
+canvas {
+  width: 100% !important;
+  height: 100% !important;
+  min-height: 100% !important;
+  display: block !important;
+  position: absolute !important;
+  top: 0 !important;
+  left: 0 !important;
+  z-index: 1 !important;
+}
+</style>

src/content/Backgrounds/Particles/Particles.vue

@@ -1,5 +1,5 @@
 <template>
-  <div ref="containerRef" :class="className" class="relative w-full h-full"></div>
+  <div ref="containerRef" :class="className" class="relative"></div>
 </template>
 
 <script setup lang="ts">
@@ -142,19 +142,31 @@ const initParticles = () => {
   gl.canvas.style.width = '100%'
   gl.canvas.style.height = '100%'
   gl.canvas.style.display = 'block'
+  gl.canvas.style.position = 'absolute'
+  gl.canvas.style.top = '0'
+  gl.canvas.style.left = '0'
 
   camera = new Camera(gl, { fov: 15 })
   camera.position.set(0, 0, props.cameraDistance)
 
   const resize = () => {
-    const width = container.clientWidth
-    const height = container.clientHeight
+    if (!container) return
+    
+    const parentWidth = container.parentElement?.offsetWidth || container.offsetWidth || window.innerWidth
+    const parentHeight = container.parentElement?.offsetHeight || container.offsetHeight || window.innerHeight
+    
+    const width = Math.max(parentWidth, 300)
+    const height = Math.max(parentHeight, 300)
+    
     renderer!.setSize(width, height)
     camera!.perspective({ aspect: width / height })
 
     gl.canvas.style.width = '100%'
     gl.canvas.style.height = '100%'
     gl.canvas.style.display = 'block'
+    gl.canvas.style.position = 'absolute'
+    gl.canvas.style.top = '0'
+    gl.canvas.style.left = '0'
   }
   window.addEventListener('resize', resize, false)
   resize()
@@ -312,3 +324,21 @@ watch(
   () => {}
 )
 </script>
+
+<style scoped>
+div {
+  position: absolute !important;
+  top: 0 !important;
+  left: 0 !important;
+  width: 100% !important;
+  height: 100% !important;
+}
+
+:deep(canvas) {
+  position: absolute !important;
+  top: 0 !important;
+  left: 0 !important;
+  width: 100% !important;
+  height: 100% !important;
+}
+</style>

src/content/Backgrounds/Silk/Silk.vue

@@ -125,8 +125,28 @@ const initSilk = () => {
 
   const resize = () => {
     if (!container || !camera) return
-    const width = container.offsetWidth
-    const height = container.offsetHeight
+    
+    let width = container.offsetWidth
+    let height = container.offsetHeight
+    
+    let parent = container.parentElement
+    while (parent && (!width || !height)) {
+      if (parent.offsetWidth && parent.offsetHeight) {
+        width = parent.offsetWidth
+        height = parent.offsetHeight
+        break
+      }
+      parent = parent.parentElement
+    }
+    
+    if (!width || !height) {
+      width = window.innerWidth
+      height = window.innerHeight
+    }
+    
+    width = Math.max(width, 300)
+    height = Math.max(height, 300)
+        
     renderer!.setSize(width, height)
     camera.perspective({ aspect: width / height })
 
@@ -168,6 +188,10 @@ const initSilk = () => {
   gl.canvas.style.width = '100%'
   gl.canvas.style.height = '100%'
   gl.canvas.style.display = 'block'
+  gl.canvas.style.position = 'absolute'
+  gl.canvas.style.top = '0'
+  gl.canvas.style.left = '0'
+  gl.canvas.style.zIndex = '1'
 
   let lastTime = 0
   const update = (t: number) => {
@@ -230,3 +254,20 @@ watch(
   () => {}
 )
 </script>
+
+<style scoped>
+div {
+  width: 100% !important;
+  height: 100% !important;
+  min-height: 100% !important;
+  display: block !important;
+}
+
+:deep(canvas) {
+  width: 100% !important;
+  height: 100% !important;
+  min-height: 100% !important;
+  display: block !important;
+  object-fit: cover !important;
+}
+</style>