fix(zoom): fix blurred image in Safari (fix #290)

Author: igordanchenko

src/consts.ts

@@ -40,6 +40,7 @@ export const CLASS_FLEX_CENTER = "flex_center";
 export const CLASS_NO_SCROLL = "no_scroll";
 export const CLASS_NO_SCROLL_PADDING = "no_scroll_padding";
 export const CLASS_SLIDE_WRAPPER = "slide_wrapper";
+export const CLASS_SLIDE_WRAPPER_INTERACTIVE = "slide_wrapper_interactive";
 
 export const ACTION_PREV = "prev";
 export const ACTION_NEXT = "next";

src/plugins/zoom/ResponsiveImage.tsx

@@ -23,6 +23,7 @@ export function isResponsiveImageSlide(slide: SlideImage): slide is ResponsiveIm
 export type ResponsiveImageProps = Omit<ImageSlideProps, "slide" | "rect"> &
   Required<Pick<ImageSlideProps, "rect">> & {
     slide: ResponsiveImageSlide;
+    interactive: boolean;
   };
 
 type ResponsiveImageState = {
@@ -58,7 +59,7 @@ function reducer(
 export function ResponsiveImage(props: ResponsiveImageProps) {
   const [{ current, preload }, dispatch] = React.useReducer(reducer, {});
 
-  const { slide: image, rect, imageFit, render } = props;
+  const { slide: image, rect, imageFit, render, interactive } = props;
 
   const srcSet = image.srcSet.sort((a, b) => a.width - b.width);
   const width = image.width ?? srcSet[srcSet.length - 1].width;
@@ -84,7 +85,7 @@ export function ResponsiveImage(props: ResponsiveImageProps) {
 
   const style = {
     // workaround occasional flickering in mobile Safari
-    WebkitTransform: "translateZ(0)",
+    WebkitTransform: !interactive ? "translateZ(0)" : "initial",
   };
 
   if (!cover) {

src/plugins/zoom/ZoomWrapper.tsx

@@ -4,6 +4,7 @@ import {
   CLASS_FLEX_CENTER,
   CLASS_FULLSIZE,
   CLASS_SLIDE_WRAPPER,
+  CLASS_SLIDE_WRAPPER_INTERACTIVE,
   clsx,
   ContainerRect,
   cssClass,
@@ -27,6 +28,7 @@ export function ZoomWrapper({ render, slide, offset, rect }: ZoomWrapperProps) {
   const zoomWrapperRef = React.useRef<HTMLDivElement>(null);
 
   const { zoom, maxZoom, offsetX, offsetY, setZoomWrapper } = useZoom();
+  const interactive = zoom > 1;
 
   const { carousel, on } = useLightboxProps();
   const { currentIndex } = useLightboxState();
@@ -56,6 +58,7 @@ export function ZoomWrapper({ render, slide, offset, rect }: ZoomWrapperProps) {
       <ResponsiveImage
         {...slideProps}
         slide={slide}
+        interactive={interactive}
         rect={offset === 0 ? { width: rect.width * zoom, height: rect.height * zoom } : rect}
       />
     ) : (
@@ -71,7 +74,12 @@ export function ZoomWrapper({ render, slide, offset, rect }: ZoomWrapperProps) {
   return (
     <div
       ref={zoomWrapperRef}
-      className={clsx(cssClass(CLASS_FULLSIZE), cssClass(CLASS_FLEX_CENTER), cssClass(CLASS_SLIDE_WRAPPER))}
+      className={clsx(
+        cssClass(CLASS_FULLSIZE),
+        cssClass(CLASS_FLEX_CENTER),
+        cssClass(CLASS_SLIDE_WRAPPER),
+        interactive && cssClass(CLASS_SLIDE_WRAPPER_INTERACTIVE),
+      )}
       style={
         offset === 0 ? { transform: `scale(${zoom}) translateX(${offsetX}px) translateY(${offsetY}px)` } : undefined
       }

src/styles.scss

@@ -97,14 +97,6 @@
       -webkit-user-select: none;
       -webkit-touch-callout: none;
 
-      // workaround occasional image flickering in desktop Safari
-      @media screen and (min-width: 800px) {
-        // noinspection CssUnknownProperty
-        -webkit-transform: translateZ(0);
-        -webkit-backface-visibility: hidden;
-        -webkit-transform-style: preserve-3d;
-      }
-
       &_cover {
         width: 100%;
         height: 100%;
@@ -116,6 +108,16 @@
       }
     }
 
+    // workaround occasional image flickering in desktop Safari
+    @media screen and (min-width: 800px) {
+      &_wrapper:not(&_wrapper_interactive) &_image {
+        // noinspection CssUnknownProperty
+        -webkit-transform: translateZ(0);
+        -webkit-backface-visibility: hidden;
+        -webkit-transform-style: preserve-3d;
+      }
+    }
+
     &_placeholder {
       position: absolute;
       top: 50%;