背景大小fix

doc/layer/test_custom_animation_background.html

@@ -9,6 +9,8 @@
   <style>
     /* Keep Layer above the doc UI */
     .layer-overlay { z-index: 99999; }
+    /* Allow larger widths for this demo */
+    .layer-popup { max-width: none; }
   </style>
   <style>
     .controls {
@@ -341,15 +343,19 @@ function openSteps(mode) {
       const b = BACKGROUNDS.image;
 
       const code = `Layer.$({
-  title: 'Step 1',
-  text: 'Background should follow when different.',
-  background: ${mode === 'same' ? 'same' : 'a'},
   theme: 'light',
   icon: ${showIcon ? "'info'" : 'null'},
   popupAnimation: ${popupAnimation},
   closeOnEsc: ${closeOnEsc},
   showCancelButton: true
 })
+.step({
+  title: 'Step 1',
+  text: 'Background should follow when different.',
+  background: ${mode === 'same' ? 'same' : 'a'},
+  width: '55em',
+  height: '14em'
+})
 .step({
   title: 'Step 2',
   text: 'Swipe left/right to see background transition.',
@@ -358,7 +364,9 @@ function openSteps(mode) {
 .step({
   title: 'Step 3',
   text: 'Back to the first background.',
-  background: ${mode === 'same' ? 'same' : 'a'}
+  background: ${mode === 'same' ? 'same' : 'a'},
+  width: '48em',
+  height: '11em'
 })
 .run();`;
       setJsCode(code.replace(/\b(same|a|b)\b/g, (m) => {
@@ -368,15 +376,19 @@ function openSteps(mode) {
       }));
 
       Layer.$({
-        title: 'Step 1',
-        text: 'Background should follow when different.',
-        background: mode === 'same' ? same : a,
         theme: 'light',
         icon: showIcon ? 'info' : null,
         popupAnimation,
         closeOnEsc,
         showCancelButton: true
       })
+      .step({
+        title: 'Step 1',
+        text: 'Background should follow when different.',
+        background: mode === 'same' ? same : a,
+        width: '55em',
+        height: '14em'
+      })
       .step({
         title: 'Step 2',
         text: 'Swipe left/right to see background transition.',
@@ -385,7 +397,9 @@ function openSteps(mode) {
       .step({
         title: 'Step 3',
         text: 'Back to the first background.',
-        background: mode === 'same' ? same : a
+        background: mode === 'same' ? same : a,
+        width: '48em',
+        height: '11em'
       })
       .run();
     }

layer.js

@@ -903,11 +903,18 @@
       if (!w && !h) {
         popup.style.width = '';
         popup.style.height = '';
+        popup.style.maxWidth = '';
         popup.style.overflow = '';
         return;
       }
-      if (w) popup.style.width = w;
-      else popup.style.width = '';
+      if (w) {
+        popup.style.width = w;
+        // If width is explicitly set, remove default CSS max-width clamp.
+        popup.style.maxWidth = 'none';
+      } else {
+        popup.style.width = '';
+        popup.style.maxWidth = '';
+      }
       if (h) popup.style.height = h;
       else popup.style.height = '';
       popup.style.overflow = 'auto';
@@ -1146,7 +1153,9 @@
             renderer: 'svg',
             loop: true,
             autoplay: true,
-            animationData: data
+            animationData: data,
+            // Fill background container even if aspect ratio differs
+            rendererSettings: { preserveAspectRatio: 'xMidYMid slice' }
           });
           bgEl._svgAniInstance = anim;
         } catch (e) {

xjs.css

@@ -30,7 +30,7 @@
   box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
   width: fit-content;
   min-width: var(--layer-min-width, 30em);
-  max-width: 90vw;
+
   padding: 1.5em;
   display: flex;
   flex-direction: column;