Simplify how to transform the slide deck

It can resolve #18 by using `position: fixed`.
marp-team · Jun 7, 2020 · 411fa65 · 411fa65
1 parent 28cc1de
commit 411fa65
Showing 1 changed file with 16 additions and 28 deletions.
diff --git a/src/polyfill.ts b/src/polyfill.ts
@@ -23,41 +23,29 @@ export const polyfills = () =>
   navigator.vendor === 'Apple Computer, Inc.' ? [webkit] : []
 
 export function webkit(zoom?: number) {
-  Array.from(document.getElementsByTagName('svg'), (svg) => {
-    if (svg.hasAttribute('data-marpit-svg')) {
-      const { clientHeight, clientWidth } = svg
+  Array.from(
+    document.querySelectorAll<SVGSVGElement>('svg[data-marpit-svg]'),
+    (svg) => {
+      const { children, clientHeight, clientWidth, viewBox } = svg
       if (!svg.style.transform) svg.style.transform = 'translateZ(0)'
 
       // NOTE: Safari reflects a zoom level to SVG's currentScale property, but
       // the other browsers will always return 1. You have to specify the zoom
-      // factor manually if it is used in Blink engine. (e.g. Electron)
+      // factor manually if it is used in outdated Blink engine. (e.g. Electron)
       const zoomFactor = zoom || svg.currentScale || 1
 
-      const width = svg.viewBox.baseVal.width / zoomFactor
-      const height = svg.viewBox.baseVal.height / zoomFactor
+      const width = viewBox.baseVal.width / zoomFactor
+      const height = viewBox.baseVal.height / zoomFactor
       const scale = Math.min(clientHeight / height, clientWidth / width)
 
-      Array.from(
-        svg.querySelectorAll<SVGForeignObjectElement>(':scope > foreignObject'),
-        (foreignObject) => {
-          const x = foreignObject.x.baseVal.value
-          const y = foreignObject.y.baseVal.value
-
-          Array.from(
-            foreignObject.querySelectorAll<HTMLElement>(':scope > section'),
-            (section) => {
-              if (!section.style.transformOrigin) {
-                section.style.transformOrigin = '0 0'
-              }
-
-              const tx = (clientWidth - scale * width) / 2 - x
-              const ty = (clientHeight - scale * height) / 2 - y
-
-              section.style.transform = `translate3d(${tx}px,${ty}px,0) scale(${scale}) translate(${x}px,${y}px)`
-            }
-          )
-        }
-      )
+      for (let i = 0; i < children.length; i += 1) {
+        const { style } = children[i].firstChild as HTMLElement
+
+        if (!style.position) style.position = 'fixed'
+        if (!style.transformOrigin) style.transformOrigin = '0 0'
+
+        style.transform = `scale(${scale}) translateZ(0)`
+      }
     }
-  })
+  )
 }