From 411fa65db648d7634ff83c64deca5d3a7d690739 Mon Sep 17 00:00:00 2001
From: Yuki Hattori <yukihattori1116@gmail.com>
Date: Sun, 7 Jun 2020 19:41:02 +0900
Subject: [PATCH 1/3] Simplify how to transform the slide deck

It can resolve #18 by using `position: fixed`.
---
 src/polyfill.ts | 44 ++++++++++++++++----------------------------
 1 file changed, 16 insertions(+), 28 deletions(-)

diff --git a/src/polyfill.ts b/src/polyfill.ts
index 966ee6a..617a2d8 100644
--- 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)`
+      }
     }
-  })
+  )
 }

From 9430b8c6ba23bb1d6f1773bab3f08c1118344ad4 Mon Sep 17 00:00:00 2001
From: Yuki Hattori <yukihattori1116@gmail.com>
Date: Sun, 7 Jun 2020 19:42:17 +0900
Subject: [PATCH 2/3] Update test

---
 test/polyfill.ts | 2 --
 1 file changed, 2 deletions(-)

diff --git a/test/polyfill.ts b/test/polyfill.ts
index 6d758c0..0525241 100644
--- a/test/polyfill.ts
+++ b/test/polyfill.ts
@@ -78,7 +78,6 @@ describe('Marpit SVG polyfill', () => {
         const { transform, transformOrigin } = section.style
 
         expect(transformOrigin).toBeFalsy()
-        expect(transform).not.toContain('translate3d')
         expect(transform).not.toContain('scale')
       })
 
@@ -88,7 +87,6 @@ describe('Marpit SVG polyfill', () => {
         const { transform, transformOrigin } = section.style
 
         expect(transformOrigin).toBe('0 0')
-        expect(transform).toContain('translate3d')
         expect(transform).toContain('scale')
       })
     })

From 15fb970abfcbb9f9c1d72d00c50d006717a00a80 Mon Sep 17 00:00:00 2001
From: Yuki Hattori <yukihattori1116@gmail.com>
Date: Sun, 7 Jun 2020 20:12:25 +0900
Subject: [PATCH 3/3] [ci skip] Update CHANGELOG.md

---
 CHANGELOG.md | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 31c96d1..6fb9527 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -2,8 +2,13 @@
 
 ## [Unreleased]
 
+### Fixed
+
+- Fix visually shift depending on zoom level ([#18](https://github.com/marp-team/marpit-svg-polyfill/issues/18), [#19](https://github.com/marp-team/marpit-svg-polyfill/pull/19))
+
 ### Changed
 
+- Simplify transformation ([#19](https://github.com/marp-team/marpit-svg-polyfill/pull/19))
 - Upgrade dependent packages to the latest version ([#20](https://github.com/marp-team/marpit-svg-polyfill/pull/20))
 
 ## v1.2.1 - 2020-04-18