From 1064619deef082cbea7e566e78e10488f550563a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Lukas=20M=C3=B6ller?= <lmoeller@student.ethz.ch>
Date: Wed, 14 Apr 2021 21:29:43 +0200
Subject: [PATCH] fix(svg): Force svg to be a browser engine layer

---
 example/index.tsx            | 50 +++++++++++++++++++-----------------
 src/components/svg-layer.tsx |  6 +++++
 2 files changed, 33 insertions(+), 23 deletions(-)

diff --git a/example/index.tsx b/example/index.tsx
index f60482e..4db46f4 100644
--- a/example/index.tsx
+++ b/example/index.tsx
@@ -290,33 +290,37 @@ const App = () => {
 
       <h3 className={tw`text-lg font-bold mt-6 mb-4`}>Cropping</h3>
       <div className={tw`grid grid-cols-1 xl:grid-cols-2 gap-3`}>
-        <PdfViewport
-          aspectRatio={portraitA4}
-          pdf={pdf}
-          pageNumber={1}
-          yStart={0.1}
-          yEnd={0.3}
-          className={pageStyle + " " + tw`w-5/6 mx-auto xl:ml-0`}
-        >
-          <PdfSvgLayer />
-        </PdfViewport>
+        <div>
+          <PdfViewport
+            aspectRatio={portraitA4}
+            pdf={pdf}
+            pageNumber={1}
+            yStart={0.1}
+            yEnd={0.3}
+            className={pageStyle + " " + tw`w-5/6 mx-auto xl:ml-0`}
+          >
+            <PdfSvgLayer />
+          </PdfViewport>
+        </div>
         <pre>{exampleC}</pre>
       </div>
       <h3 className={tw`text-lg font-bold mt-6 mb-4`}>Text Layer</h3>
       <div className={tw`grid grid-cols-1 xl:grid-cols-2 gap-8`}>
-        <PdfViewport
-          aspectRatio={portraitA4}
-          pdf={pdf}
-          pageNumber={1}
-          yStart={0.1}
-          yEnd={0.3}
-          xStart={0.1}
-          xEnd={0.4}
-          className={pageStyle + " " + tw`w-5/6 mx-auto xl:ml-0`}
-        >
-          <PdfTextLayer />
-          <PdfSvgLayer />
-        </PdfViewport>
+        <div>
+          <PdfViewport
+            aspectRatio={portraitA4}
+            pdf={pdf}
+            pageNumber={1}
+            yStart={0.1}
+            yEnd={0.3}
+            xStart={0.1}
+            xEnd={0.4}
+            className={pageStyle + " " + tw`w-5/6 mx-auto xl:ml-0`}
+          >
+            <PdfTextLayer />
+            <PdfSvgLayer />
+          </PdfViewport>
+        </div>
         <pre>{exampleD}</pre>
       </div>
       <h3 className={tw`text-lg font-bold mt-6 mb-4`}>Custom Layer</h3>
diff --git a/src/components/svg-layer.tsx b/src/components/svg-layer.tsx
index 251620b..e602137 100644
--- a/src/components/svg-layer.tsx
+++ b/src/components/svg-layer.tsx
@@ -69,6 +69,12 @@ const PdfSvgLayer = () => {
         // of the pdf, but junk.
         pointerEvents: "none",
         userSelect: "none",
+        WebkitUserSelect: "none",
+        MozUserSelect: "none",
+        backfaceVisibility: "hidden",
+        WebkitBackfaceVisibility: "hidden",
+        MozBackfaceVisibility: "hidden",
+        willChange: "opacity",
 
         // Apply transforms so that the pdf is cropped correctly:
         // (xEnd - xStart) = 100 width in relative cropped display space