fix(svg): Force svg to be a browser engine layer

lukasmoellerch · Apr 14, 2021 · 1064619 · 1064619
1 parent 72a74c4
commit 1064619
Show file tree

Hide file tree

Showing 2 changed files with 33 additions and 23 deletions.
diff --git 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
@@ -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