fix:safari optimazations

donkeyclip · Apr 20, 2023 · ef90c29 · ef90c29
1 parent d362df7
commit ef90c29
Show file tree

Hide file tree

Showing 11 changed files with 967 additions and 310 deletions.
diff --git a/clip/clip.css b/clip/clip.css
@@ -26,6 +26,7 @@
   width: 100%;
   height: 100%;
   position: absolute;
+  opacity: 0;
 }
 
 .cercle{
@@ -197,7 +198,7 @@
   left: 80px;
   overflow: hidden;
   position: absolute;
-  top: 700px;
+  top: 64%;
   width: 350px;
 }
 
@@ -206,7 +207,7 @@
   left: 80px;
   overflow: hidden;
   position: absolute;
-  top: 100px;
+  top: 0.5%;
   width: 350px;
 }
 
@@ -215,23 +216,22 @@
   left: 870px;
   overflow: hidden;
   position: absolute;
-  top: 500px;
+
   width: 350px;
 }
 .surname-wrapper{
   height: 65px;
   left: 870px;
   overflow: hidden;
   position: absolute;
-  top: 565px;
+  top: 48%;
   width: 50%;
 }
 
 /**/
 .image-wrapper{
   background-color: var(--color);
   border-radius: 50%;
-  filter: drop-shadow(1px 0 15px #00000031);
   left:600px;
   position: absolute;
   top: -100%;
@@ -252,7 +252,7 @@
 /**/
 
 .surname-wrapper{
-  top: 565px;
+  top: 48%;
 }
 
 .position-wrapper{
@@ -261,7 +261,6 @@
   left: 870px;
   position: absolute;
   text-transform: uppercase;
-  top: 60%;
   width: 575px;
   overflow: hidden;
   height: 150px;
@@ -304,7 +303,7 @@
   height: 400px;
   position: absolute;
   right: 300px;
-  top: 20px;
+  top: 2%;
   opacity: 0;
 }
 
@@ -335,12 +334,13 @@
   font-size: 60px;
   font-weight: 900;
 }
-
+.test{
+  color: red;
+}
 .venue-town-image-wrapper1{
   position: absolute;
   width: 650px;
   height: 650px;
-  filter: drop-shadow(1px 0 15px #00000031);
   background-color: var(--color);
   border-radius: 100%;
   overflow: hidden;
@@ -352,7 +352,6 @@
   position: absolute;
   width: 400px;
   height: 400px;
-  filter: drop-shadow(1px 0 15px #00000031);
   border-radius: 100%;
   left:-860px;
   top: 610px;
@@ -363,7 +362,6 @@
   position: absolute;
   width: 320px;
   height: 320px;
-  filter: drop-shadow(1px 0 15px #00000031);
   border-radius: 100%;
   left:-860px;
   top: 50px;
@@ -447,7 +445,6 @@
   position: absolute;
   width: 850px;
   height: 850px;
-  filter: drop-shadow(1px 0 15px #00000031);
   background-color: var(--color);
   border-radius: 100%;
   overflow: hidden;

diff --git a/clip/clip.html b/clip/clip.html
@@ -22,17 +22,17 @@
       <div class="sponsor-title">Sponsored by</div>
       <div class="logos-wrapper">
         <div class="logo" mc-for="key,item" mc-of="initParams.sponsors" style="background-image: url({{item}});">
+        </div>
       </div>
     </div>
-   </div>
   </div>
   <!-- scene-4 -->
   <div class="scene-4">
     <div class="blue-ball ball"></div>
     <div class="white-ball ball"></div>
   </div>
-   <!-- scene-5 -->
-   <div class="con">
+  <!-- scene-5 -->
+  <div class="con">
     <div class="scene-5" mc-for="key,item" mc-of="initParams.speekers">
       <div class="dot-box"></div>
       <div class="cercle cercle-9"></div>
@@ -59,7 +59,7 @@
           </div>
         </div>
       </div>
-  
+
       <div class="name-wrapper">
         <div class="name">{{item.name}}</div>
       </div>
@@ -74,8 +74,8 @@
       </div>
     </div>
   </div>
-   <!-- scene-6 -->
-   <div class="scene-6">
+  <!-- scene-6 -->
+  <div class="scene-6">
     <div class="cercle-5 cercle"></div>
     <div class="cercle-6 cercle"></div>
     <div class="venue-town-image-wrapper1">
@@ -111,12 +111,12 @@
         {{initParams.venue.hall}}
       </div>
     </div>
-  
+
     <div class="address-wrapper">
-  
+
       <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="150"
         height="100" viewBox="0 0 256 256" xml:space="preserve">
-  
+
         <defs>
         </defs>
         <g style="stroke: none; stroke-width: 0; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill: none; fill-rule: nonzero; opacity: 1;"
@@ -141,6 +141,6 @@
       </div>
     </div>
     <a class="link" href="{{initParams.eventLink}}">{{initParams.eventLink}}</a>
-  
+
   </div>
-</div>
+</div>