@designcrowd/library.brand-page 5.17.27-shape-memory-1 → 5.17.27-shape-memory-2

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@designcrowd/library.brand-page",
   "description": "A collection of Maker/Designer applications",
-  "version": "5.17.27-shape-memory-1",
+  "version": "5.17.27-shape-memory-2",
   "author": "Design.com Eng",
   "license": "UNLICENSED",
   "type": "module",

package/src/brand-page/components/background-shape/BackgroundShape.vue

@@ -19,16 +19,10 @@ export default {
 </script>
 <style scoped>
 .c-shape-background {
-  transform: translate3d(0, 0, 0);
-  position: fixed;
+  position: absolute;
   top: 0;
   left: 0;
   width: 100%;
-  height: 100vh;
-}
-
-.template-preview .c-shape-background,
-.device-wrapper .c-shape-background {
   height: 100%;
 }
 

package/src/brand-page/components/page/Page.vue

@@ -33,11 +33,17 @@
     "
   >
     <div class="brand-page">
-      <BackgroundShape
-        v-for="(shape, i) in backgroundShapes"
-        :key="`${shape.name}-${i}`"
-        :view-model="shape"
-      />
+      <div
+        v-if="backgroundShapes.length"
+        class="brand-page__background-shapes-layer"
+        aria-hidden="true"
+      >
+        <BackgroundShape
+          v-for="(shape, i) in backgroundShapes"
+          :key="`${shape.name}-${i}`"
+          :view-model="shape"
+        />
+      </div>
       <div
         id="preview-page-scroll"
         class="brand-page__inner tw-overflow-x-hidden tw-overflow-y-auto"
@@ -348,6 +354,22 @@ body {
   @apply tw-h-full tw-box-border tw-flex tw-flex-col;
 }
 
+.brand-page__background-shapes-layer {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100vh;
+  pointer-events: none;
+  transform: translate3d(0, 0, 0);
+  contain: layout paint;
+}
+
+.template-preview .brand-page__background-shapes-layer,
+.device-wrapper .brand-page__background-shapes-layer {
+  height: 100%;
+}
+
 .brand-page__inner--default {
   @apply tw-h-full tw-flex tw-flex-col tw-relative tw-z-10;
 }