fix(experimental): Sensitive fix svg interruption in safari (#6118)

taiga-family · Nov 29, 2023 · ed02bda · ed02bda
1 parent 7610f55
commit ed02bda
Showing 1 changed file with 2 additions and 4 deletions.
diff --git a/projects/experimental/directives/sensitive/sensitive.style.less b/projects/experimental/directives/sensitive/sensitive.style.less
@@ -11,10 +11,8 @@
         content: '';
         background: currentColor;
         border-radius: inherit;
-        mask-image: url('data:image/svg+xml,<svg width="360" height="48" viewBox="0 0 360 48" fill="black" xmlns="http://www.w3.org/2000/svg"><rect opacity="0.2" width="24" height="24"/><rect opacity="0.2" x="336" y="24" width="24" height="24"/><rect opacity="0.35" x="120" y="24" width="24" height="24"/><rect opacity="0.35" x="216" width="24" height="24"/><rect opacity="0.36" x="24" width="24" height="24"/><rect opacity="0.36" x="312" y="24" width="24" height="24"/><rect opacity="0.25" x="144" y="24" width="24" height="24"/><rect opacity="0.25" x="192" width="24" height="24"/><rect opacity="0.3" x="48" width="24" height="24"/><rect opacity="0.3" x="288" y="24" width="24" height="24"/><rect opacity="0.3" x="96" y="24" width="24" height="24"/><rect opacity="0.3" x="240" y="0" width="24" height="24"/><rect opacity="0.24" x="72" width="24" height="24"/><rect opacity="0.34" x="264" y="24" width="24" height="24"/><rect opacity="0.2" x="168" y="24" width="24" height="24"/><rect opacity="0.35" y="24" width="24" height="24"/><rect opacity="0.35" x="336" y="0" width="24" height="24"/><rect opacity="0.3" x="120" y="0" width="24" height="24" /><rect opacity="0.3" x="216" y="24" width="24" height="24"/><rect opacity="0.3" x="24" y="24" width="24" height="24"/><rect opacity="0.3" x="312" y="0" width="24" height="24"/><rect opacity="0.36" x="144" y="0" width="24" height="24"/><rect opacity="0.36" x="192" y="24" width="24" height="24"/><rect opacity="0.4" x="48" y="24" width="24" height="24"/><rect opacity="0.4" x="288" y="0" width="24" height="24"/><rect opacity="0.38" x="96" y="0" width="24" height="24"/><rect opacity="0.21" x="240" y="24" width="24" height="24"/><rect opacity="0.2" x="72" y="24" width="24" height="24"/><rect opacity="0.2" x="264" y="0" width="24" height="24"/><rect opacity="0.32" x="168" y="0" width="24" height="24"/></svg>');
-
-        /* "100% width" causes interruptions in safari */
-        mask-size: auto 99%;
+        mask-image: url('data:image/svg+xml,<svg width="360" height="48" preserveAspectRatio="none" fill="black" xmlns="http://www.w3.org/2000/svg"><rect opacity="0.2" width="24" height="24"/><rect opacity="0.2" x="336" y="24" width="24" height="24"/><rect opacity="0.35" x="120" y="24" width="24" height="24"/><rect opacity="0.35" x="216" width="24" height="24"/><rect opacity="0.36" x="24" width="24" height="24"/><rect opacity="0.36" x="312" y="24" width="24" height="24"/><rect opacity="0.25" x="144" y="24" width="24" height="24"/><rect opacity="0.25" x="192" width="24" height="24"/><rect opacity="0.3" x="48" width="24" height="24"/><rect opacity="0.3" x="288" y="24" width="24" height="24"/><rect opacity="0.3" x="96" y="24" width="24" height="24"/><rect opacity="0.3" x="240" y="0" width="24" height="24"/><rect opacity="0.24" x="72" width="24" height="24"/><rect opacity="0.34" x="264" y="24" width="24" height="24"/><rect opacity="0.2" x="168" y="24" width="24" height="24"/><rect opacity="0.35" y="24" width="24" height="24"/><rect opacity="0.35" x="336" y="0" width="24" height="24"/><rect opacity="0.3" x="120" y="0" width="24" height="24" /><rect opacity="0.3" x="216" y="24" width="24" height="24"/><rect opacity="0.3" x="24" y="24" width="24" height="24"/><rect opacity="0.3" x="312" y="0" width="24" height="24"/><rect opacity="0.36" x="144" y="0" width="24" height="24"/><rect opacity="0.36" x="192" y="24" width="24" height="24"/><rect opacity="0.4" x="48" y="24" width="24" height="24"/><rect opacity="0.4" x="288" y="0" width="24" height="24"/><rect opacity="0.38" x="96" y="0" width="24" height="24"/><rect opacity="0.21" x="240" y="24" width="24" height="24"/><rect opacity="0.2" x="72" y="24" width="24" height="24"/><rect opacity="0.2" x="264" y="0" width="24" height="24"/><rect opacity="0.32" x="168" y="0" width="24" height="24"/></svg>');
+        mask-size: auto 100%;
         mask-position: var(--t-offset, 0) 0;
     }