Update style/style_template.css

style/style_template.css

@@ -1,12 +1,19 @@
-/* viewer.css */
+/* Critical fixes for page scrolling */
+html, body {
+  overflow: auto !important;
+  height: auto !important;
+  position: static !important;
+}
 
 /* Widget container styling */
 .ply-widget-container {
-  position: relative;
+  position: relative !important;
   width: 100%;
   height: 0;
+  z-index: 1 !important;
+  touch-action: pan-x pan-y !important;
+  overflow: visible !important;
   /* padding-bottom is set dynamically inline for aspect ratio */
-  background-color: black; /* Background color set to black for PlayCanvas compatibility */
 }
 
 /* When in fake fullscreen mode (iOS fallback) */
@@ -18,7 +25,6 @@
   height: 100vh !important;
   padding-bottom: 0 !important;
   z-index: 9999 !important;
-  background-color: black;
 }
 
 /* GIF Preview styling */
@@ -49,11 +55,12 @@
   left: 0;
   width: 100%;
   height: 100%;
-  background: black; /* Changed to black for PlayCanvas */
+  background: black;
   border: 1px solid #474558;
   border-radius: 10px;
   overflow: hidden;
   box-sizing: border-box;
+  touch-action: pan-x pan-y !important;
 }
 
 /* Canvas fills the viewer container */
@@ -61,7 +68,8 @@
   width: 100%;
   height: 100%;
   display: block;
-  background-color: transparent; /* Transparent background for PlayCanvas rendering */
+  background-color: transparent;
+  touch-action: pan-x pan-y !important;
 }
 
 /* Progress dialog styling (centered) */
@@ -71,7 +79,7 @@
   left: 50%;
   transform: translate(-50%, -50%);
   border: none;
-  background: rgba(0,0,0,0.7); /* Darker background to match the black theme */
+  background: rgba(0,0,0,0.7);
   padding: 20px;
   border-radius: 5px;
   z-index: 1000;
@@ -209,13 +217,7 @@ progress::-moz-progress-bar {
   width: 100%;
   height: 100%;
   display: block;
-}
-
-html, body {
-  margin: 0;
-  padding: 0;
-  height: 100%;
-  overflow: hidden;
+  touch-action: pan-x pan-y !important;
 }
 
 /* Error message styling */