fix: slide scale = container scale * zoom scale (#2355)

Author: kermanx

packages/client/internals/SlideContainer.vue

@@ -52,7 +52,6 @@ const contentStyle = computed(() => ({
   ...props.contentStyle,
   'height': `${slideHeight.value}px`,
   'width': `${slideWidth.value}px`,
-  'transform': `translate(-50%, -50%) scale(${scale.value})`,
   '--slidev-slide-scale': scale.value,
 }))
 
@@ -117,6 +116,8 @@ const snapshot = computed(() => {
 }
 
 .slidev-slide-content {
+  --slidev-slide-container-scale: var(--slidev-slide-scale);
+  transform: translate(-50%, -50%) scale(var(--slidev-slide-scale));
   @apply absolute left-1/2 top-1/2 overflow-hidden bg-main;
 }
 </style>

packages/client/internals/SlideWrapper.vue

@@ -32,19 +32,9 @@ provideLocal(injectionRenderContext, ref(props.renderContext))
 provideLocal(injectionClicksContext, toRef(props, 'clicksContext'))
 provideLocal(injectionSlideZoom, zoom)
 
-const zoomStyle = computed(() => {
-  return zoom.value === 1
-    ? undefined
-    : {
-        width: `${100 / zoom.value}%`,
-        height: `${100 / zoom.value}%`,
-        transformOrigin: 'top left',
-        transform: `scale(${zoom.value})`,
-      }
-})
 const style = computed<CSSProperties>(() => ({
-  ...zoomStyle.value,
   'user-select': configs.selectable ? undefined : 'none',
+  '--slidev-slide-zoom-scale': zoom.value === 1 ? undefined : zoom.value,
 }))
 </script>
 
@@ -69,5 +59,14 @@ const style = computed<CSSProperties>(() => ({
 .slidev-page {
   position: absolute;
   inset: 0;
+
+  /* Zoom handling */
+  --slidev-slide-zoom-scale: 1;
+  width: calc(100% / var(--slidev-slide-zoom-scale));
+  height: calc(100% / var(--slidev-slide-zoom-scale));
+  transform-origin: top left;
+  transform: scale(var(--slidev-slide-zoom-scale));
+  /* slide scale = container scale * zoom scale */
+  --slidev-slide-scale: calc(var(--slidev-slide-container-scale) * var(--slidev-slide-zoom-scale));
 }
 </style>