zz-shopify-components 0.16.3-beta.4 → 0.16.3-beta.6

package/assets/zz-components.css

@@ -1,3 +1,10 @@
+html.zz-global-noscroll,
+html.zz-global-noscroll body {
+  overflow: hidden !important;
+  position: relative;
+  height: 100% !important;
+}
+
 /* tab radio组件 */
 .zz-radio-tabs {
   display: flex;
@@ -6,9 +13,11 @@
   border-radius: 32px;
   background: #F5F5F6;
 }
+
 body {
   overflow-x: hidden;
 }
+
 .zz-radio-tabs-black.zz-radio-tabs {
   background: #FFFFFF14;
 }
@@ -48,7 +57,7 @@ zz-radio-tabs-item {
   vertical-align: middle;
   height: 100%;
   white-space: nowrap;
-  
+
 }
 
 .zz-radio-tabs-black.zz-radio-tabs .zz-radio-tabs-label {
@@ -64,12 +73,14 @@ zz-radio-tabs-item {
   background: #FFFFFF1F;
   color: #FFFFFF;
 }
+
 @media (min-width: 1024px) {
   .zz-radio-tabs {
-      height: 48px;
+    height: 48px;
   }
+
   .zz-radio-tabs-label {
-      font-size: 16px;
+    font-size: 16px;
   }
 }
 
@@ -102,29 +113,35 @@ zz-radio-tabs-item {
   background-size: 4px 4px, 4px 4px;
   background-repeat: no-repeat;
 }
+
 .zz-select:focus {
   border-color: #FC6C0F;
   outline: none;
   box-shadow: none;
 }
+
 @media (min-width: 1024px) {
   .zz-select {
-      height: 40px;
-      font-size: 14px;
+    height: 40px;
+    font-size: 14px;
   }
 }
+
 /* 内容描述 */
 .content-text strong {
   color: #000000;
   font-weight: inherit;
 }
+
 .content-text a {
   color: #378DDD;
   text-decoration: underline;
 }
+
 .content-text a:hover {
   opacity: 0.8;
 }
+
 .content-text ol {
   list-style: decimal;
   padding-left: 25px;
@@ -136,7 +153,7 @@ zz-radio-tabs-item {
 }
 
 /* 标题 */
-.zz-title-hx p{
+.zz-title-hx p {
   margin: 0;
 }
 
@@ -153,11 +170,13 @@ zz-radio-tabs-item {
   border-radius: 4px;
   z-index: -1;
 }
+
 /* dialog 弹窗组件， PC中间弹出，移动端底部弹出 */
 body.zz-dialog-open {
   overflow: hidden;
   touch-action: none;
 }
+
 .zz-dialog-mask {
   position: fixed;
   inset: 0;
@@ -165,6 +184,7 @@ body.zz-dialog-open {
   display: none;
   z-index: 1000;
 }
+
 .zz-dialog {
   position: fixed;
   background: #fff;
@@ -174,38 +194,42 @@ body.zz-dialog-open {
   display: none;
   transition: all 0.3s ease;
 }
+
 @media (min-width: 1024px) {
   .zz-dialog {
-      top: 50%;
-      left: 50%;
-      transform: translate(-50%, -50%) scale(0.7);
-      opacity: 0;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%) scale(0.7);
+    opacity: 0;
 
   }
 
   .zz-dialog.show {
-      transform: translate(-50%, -50%) scale(1);
-      opacity: 1;
+    transform: translate(-50%, -50%) scale(1);
+    opacity: 1;
   }
 }
+
 @media (max-width: 1023px) {
   .zz-dialog {
-      bottom: 0;
-      left: 0;
-      width: 100%;
-      border-bottom-left-radius: 0;
-      border-bottom-right-radius: 0;
-      transform: translateY(100%);
+    bottom: 0;
+    left: 0;
+    width: 100%;
+    border-bottom-left-radius: 0;
+    border-bottom-right-radius: 0;
+    transform: translateY(100%);
   }
 
   .zz-dialog.show {
-      transform: translateY(0);
+    transform: translateY(0);
   }
 }
+
 .zz-underline {
   text-decoration: none;
   border-bottom: 1px solid currentColor;
-  padding-bottom: 2px; /* 调整位置 */
+  padding-bottom: 2px;
+  /* 调整位置 */
 }
 
 /* 按钮样式 zz-btn */
@@ -216,7 +240,7 @@ body.zz-dialog-open {
   height: 40px;
   padding: 0px 24px;
   border-radius: 4px;
-  transition: opacity 0.2s cubic-bezier(.4,0,.2,1);
+  transition: opacity 0.2s cubic-bezier(.4, 0, .2, 1);
   outline: none;
   gap: 7px;
   font-weight: 500;
@@ -229,70 +253,84 @@ body.zz-dialog-open {
   background: #000000;
   color: #fff;
 }
+
 .zz-btn.zz-btn-primary.zz-btn-white {
   background: #fff;
   color: #000000;
   border: 1.5px solid #fff;
 }
+
 .zz-btn.zz-btn-primary.zz-btn-orange {
   background: #FC6C0F;
   color: #fff;
 }
+
 .zz-btn.zz-btn-primary.zz-btn-blue {
   background: #378DDD;
   color: #fff;
 }
+
 .zz-btn.zz-btn-primary.zz-btn-yellow {
   background: linear-gradient(139.02deg, #FFEB00 0.01%, #FFD400 100.55%);
   color: #000000;
 }
+
 .zz-btn.zz-btn-primary-round.zz-btn-black {
   background: #000000;
   color: #fff;
   border-radius: 30px;
 }
+
 .zz-btn.zz-btn-primary-round.zz-btn-white {
   background: #fff;
   color: #000000;
   border-radius: 30px;
 }
+
 .zz-btn.zz-btn-default.zz-btn-black {
   background: transparent;
   color: #000000;
   border: 1.5px solid #000000;
 }
+
 .zz-btn.zz-btn-default.zz-btn-white {
   background: transparent;
   color: #fff;
   border: 1.5px solid #fff;
 }
+
 .zz-btn.zz-btn-default.zz-btn-orange {
   background: transparent;
   color: #FC6C0F;
   border: 1.5px solid #FC6C0F;
 }
+
 .zz-btn.zz-btn-default.zz-btn-yellow {
   background: transparent;
   color: #000;
   border: 1.5px solid #FFEB00;
 }
+
 .zz-btn.zz-btn-default.zz-btn-blue {
   background: transparent;
   color: #378DDD;
   border: 1.5px solid #378DDD;
 }
+
 .zz-btn.zz-btn-round.zz-btn-black {
   background: transparent;
   color: #000000;
   border: 1.5px solid #000000;
   border-radius: 30px;
 }
+
 .zz-btn.zz-btn-round.zz-btn-white {
   background: transparent;
   color: #fff;
   border: 1.5px solid #fff;
   border-radius: 30px;
 }
+
 .zz-btn.zz-btn-round.zz-btn-orange {
   background: transparent;
   color: #ff9900;
@@ -303,12 +341,15 @@ body.zz-dialog-open {
 .zz-btn-link.zz-btn-blue {
   color: #378DDD;
 }
+
 .zz-btn-link.zz-btn-orange {
   color: #FC6C0F;
 }
+
 .zz-btn-link.zz-btn-white {
   color: #fff;
 }
+
 .zz-btn-link.zz-btn-black {
   color: #000000;
 }
@@ -325,56 +366,67 @@ body.zz-dialog-open {
   opacity: 0.5;
   cursor: not-allowed;
 }
+
 .zz-btn.zz-btn-large {
   height: 42px;
   padding: 0px 28px;
 }
+
 .zz-btn.zz-btn-small {
   height: 21px;
   padding: 0px 10px;
   font-size: 10px;
 }
+
 .zz-btn-link.zz-btn-link-small {
   font-size: 10px;
 }
+
 .zz-btn-link.zz-btn-link-large {
   font-size: 14px;
 }
 
 @media (min-width: 1024px) {
-    .zz-btn.zz-btn-large {
-        height: 48px;
-        padding: 0px 32px;
-      }
-      .zz-btn.zz-btn-small {
-        height: 26px;
-        padding: 0px 10px;
-        font-size: 14px;
-      }
-      .zz-btn-link.zz-btn-link-small {
-        font-size: 12px;
-      }
-      .zz-btn-link.zz-btn-link-large {
-        font-size: 16px;
-      }
+  .zz-btn.zz-btn-large {
+    height: 48px;
+    padding: 0px 32px;
+  }
+
+  .zz-btn.zz-btn-small {
+    height: 26px;
+    padding: 0px 10px;
+    font-size: 14px;
+  }
+
+  .zz-btn-link.zz-btn-link-small {
+    font-size: 12px;
+  }
+
+  .zz-btn-link.zz-btn-link-large {
+    font-size: 16px;
+  }
 }
 
 .zz-btn-shape-round {
   border-radius: 90px;
 }
+
 .zz-video {
-  border-radius: inherit; 
+  border-radius: inherit;
 }
 
-.zz-toast-layer{
+.zz-toast-layer {
   position: fixed;
   inset: 0;
   display: grid;
   place-items: center;
-  pointer-events: none; /* 不阻挡点击 */
-  z-index: 9999;  /* 最高层 */
+  pointer-events: none;
+  /* 不阻挡点击 */
+  z-index: 9999;
+  /* 最高层 */
 }
-.zz-toast-box{
+
+.zz-toast-box {
   pointer-events: auto;
   max-width: min(86vw, 520px);
   box-sizing: border-box;
@@ -393,17 +445,20 @@ body.zz-dialog-open {
   display: inline-flex;
 
 }
+
 .zz-toast-icon {
   margin-right: 4px;
   padding: 0px 2px;
 }
+
 @media screen and (min-width: 1024px) {
-  .zz-toast-msg{
+  .zz-toast-msg {
     font-size: 16px;
   }
-  
+
 }
-.zz-toast-box.show{
+
+.zz-toast-box.show {
   opacity: 1;
   transform: translateZ(0) scale(1);
-}
+}

package/assets/zz-components.js

@@ -374,3 +374,48 @@ if (!customElements.get('zz-video-popup')) {
   // 暴露到全局
   window.zzShowToast = zzShowToast;
 })();
+
+(function () {
+  let scrollTop = 0;
+
+  function isSafari() {
+    const ua = navigator.userAgent;
+    // 包含 Safari / WebKit，且不包含 Chrome / CriOS / FxiOS / Android
+    return /Safari/.test(ua) 
+      && /AppleWebKit/.test(ua)
+      && !/CriOS|FxiOS|Chrome|Edg|OPR/.test(ua);
+  }
+
+  function isSafari26() {
+      const ua = navigator.userAgent;
+      if (!isSafari()) return false;
+      // 检查 “Version/26.0” 或类似标识
+      return /Version\/26\./.test(ua);
+  }
+
+
+
+  function lockBodyScroll() {
+    if (isSafari26()) {
+      scrollTop = window.scrollY;
+      document.documentElement.classList.add('zz-global-noscroll');
+    } else {
+      document.body.style.overflow = 'hidden';
+    }
+  }
+
+  function unlockBodyScroll() {
+    if (isSafari26()) {
+      document.documentElement.classList.remove('zz-global-noscroll');
+      document.documentElement.style.scrollBehavior = 'auto';
+      window.scrollTo(0, scrollTop);
+      requestAnimationFrame(() => {
+        document.documentElement.style.scrollBehavior = '';
+      });
+    } else {
+      document.body.style.overflow = '';
+    }
+  }
+  window.zzLockBodyScroll = lockBodyScroll;
+  window.zzUnlockBodyScroll = unlockBodyScroll;
+})();

package/assets/zz-version-dialog.js

@@ -16,6 +16,7 @@ class VersionDialog extends HTMLElement {
           if (!this.swiper) {
             this.initSwiper();
           }
+          window.zzLockBodyScroll && window.zzLockBodyScroll();
         } else {
           // 销毁swiper
           if (this.swiper) {
@@ -33,6 +34,7 @@ class VersionDialog extends HTMLElement {
         if (this.swiper) {
           this.destroySwiper();
         }
+        window.zzUnlockBodyScroll && window.zzUnlockBodyScroll();
       });
 
       // 添加点击backdrop关闭的事件监听

package/blocks/zz-normal-swiper.liquid

@@ -208,7 +208,7 @@
 <div
   class='zz-normal-swiper swiper zz-normal-swiper-{{ block.id }}'
 >
-  <div class='zz-swiper-wrapper swiper-wrapper'>
+  <div class='zz-swiper-wrapper swiper-wrapper tw-invisible'>
     {% for block in block.blocks %}
       <div class='swiper-slide'>
         {% render block %}
@@ -291,6 +291,7 @@
       if (initialized) return;
       initialized = true;
       instance = new Swiper(swiperSelector, options);
+      if (swiperWrapper) swiperWrapper.classList.remove('tw-invisible');
     }
 
     const root = block.querySelector(swiperSelector);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "zz-shopify-components",
-  "version": "0.16.3-beta.4",
+  "version": "0.16.3-beta.6",
   "description": "Reusable Shopify components for theme projects",
   "keywords": [
     "shopify",