fix(zoom): fix image move in element

fixes #6847
nolimits4web · Jul 12, 2023 · 89d9aa5 · 89d9aa5
1 parent 697b028
commit 89d9aa5
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 5 deletions.
diff --git a/scripts/utils/get-element-styles.js b/scripts/utils/get-element-styles.js
@@ -18,22 +18,29 @@ export const getSplittedCSS = (content) => {
   const cssStylesSlideFlip = (content.split(`/* Flip slide shadows start */`)[1] || '').split(
     `/* Flip slide shadows end */`,
   )[0];
+  const cssStylesSlideZoom = (content.split(`/* Zoom container styles start */`)[1] || '').split(
+    `/* Zoom container styles end */`,
+  )[0];
   const navigationFontStyles = (content.split('/* Navigation font start */')[1] || '').split(
     '/* Navigation font end */',
   )[0];
   content = content
     .replace(cssStylesSlideCore, '')
     .replace(cssStylesSlideCube, '')
     .replace(cssStylesSlideFlip, '')
-    .replace(navigationFontStyles, '');
+    .replace(navigationFontStyles, '')
+    .replace(cssStylesSlideZoom, '');
   if (content.includes(`/* FONT_END */`)) {
     content = content.split('/* FONT_END */')[1];
   }
 
   return {
-    slides: [cssStylesSlideCore || '', cssStylesSlideCube || '', cssStylesSlideFlip || ''].join(
-      '\n',
-    ),
+    slides: [
+      cssStylesSlideCore || '',
+      cssStylesSlideCube || '',
+      cssStylesSlideFlip || '',
+      cssStylesSlideZoom || '',
+    ].join('\n'),
     container: content,
   };
 };
@@ -89,6 +96,9 @@ const proceedSlideReplacements = (content) => {
       if (line.includes('animation: swiper-preloader-spin 1s infinite linear;')) {
         return '';
       }
+      if (line.includes('.swiper-zoom-container')) {
+        return line.replace('.swiper-zoom-container', '::slotted(.swiper-zoom-container)');
+      }
       if (line.includes('--swiper-preloader-color:')) return '';
       if (line.includes('.swiper-3d .swiper-slide-shadow')) {
         return line.replace('.swiper-3d ', '::slotted(').replace(',', '),').replace(' {', ') {');

diff --git a/src/modules/zoom/zoom.less b/src/modules/zoom/zoom.less
@@ -1,3 +1,4 @@
+/* Zoom container styles start */
 .swiper-zoom-container {
   width: 100%;
   height: 100%;
@@ -14,6 +15,7 @@
     object-fit: contain;
   }
 }
+/* Zoom container styles end */
 
 .swiper-slide-zoomed {
   cursor: move;

diff --git a/src/modules/zoom/zoom.mjs b/src/modules/zoom/zoom.mjs
@@ -112,7 +112,7 @@ export default function Zoom({ swiper, extendParams, on, emit }) {
     const selector = `.${swiper.params.zoom.containerClass}`;
     if (e.target.matches(selector)) return true;
     if (
-      [...swiper.el.querySelectorAll(selector)].filter((containerEl) =>
+      [...swiper.hostEl.querySelectorAll(selector)].filter((containerEl) =>
         containerEl.contains(e.target),
       ).length > 0
     )