Merge pull request #19 from marp-team/simplify-transform

Simplify transformation and fix visually shift depending on zoom level
marp-team · Jun 7, 2020 · 37d1cd0 · 37d1cd0
2 parents 9516bf7 + 15fb970
commit 37d1cd0
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 30 deletions.
diff --git 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

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)`
+      }
     }
-  })
+  )
 }
diff --git 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')
       })
     })