Repository: shipshapecode/shepherd (language: javascript)

Issue:
Background is opaque while popup is shown
Hi
We are able to see opaque backgrounds occasionally while implementing shepherd tour in our project. We are able to get similar scenarios in the demo projects as well. The issue gets automatically fixed after a scroll is done.
Attaching the video of the issue. The issue is happening in chrome. 

Any ideas on how to solve this problem?

https://user-images.githubusercontent.com/23118039/171850337-caa1c748-1f10-4458-a210-f2f598286f55.mp4


https://user-images.githubusercontent.com/23118039/171850340-50f59ec9-22ac-4b42-a6b4-693f98bb5afe.mov




Discussion / hints:
Hi, is nice to find this was already reported, we are also experiencing it. 
@monshan can you take a look at this please? It seems the CSS is not applied to the svg. Feels like maybe a Chrome bug?

Fix patch:
diff --git a/src/js/components/shepherd-modal.svelte b/src/js/components/shepherd-modal.svelte
index 9f67db4fc..97f4acd11 100644
--- a/src/js/components/shepherd-modal.svelte
+++ b/src/js/components/shepherd-modal.svelte
@@ -231,6 +231,7 @@
     height: 100vh;
     opacity: 0.5;
     transition: all 0.3s ease-out, height 0s 0s, opacity 0.3s 0s;
+    transform: translateZ(0);
   }
 
   .shepherd-modal-overlay-container.shepherd-modal-is-visible path {


Test patch: