removed -webkit-clip-path fallback since it doesn't work in Safari 12…

….1 on iOS (worked on Opera 41 though).

augmented.css

@@ -1141,7 +1141,6 @@
 }
 [augmented-ui~="border-el"],
 [augmented-ui~="exe"]::after {
-  background: var(--aug-border-bg, none);
   opacity: var(--aug-border-opacity, 1);
   position: absolute;
   left: 0px;
@@ -1165,6 +1164,13 @@
     var(--aug-_TlInset1JoinBX, var(--aug-_W)) var(--aug-_TlInset1JoinBY, var(--aug-_W))
   );
 }
+/* This renders a background in an element (or pseudo element) on top of the content. If it can't be clipped, it must not happen. Fallbacks add a css border to it. */
+@supports (clip-path: polygon(0 0, 100% 0, 50% 50%)) {
+  [augmented-ui~="border-el"],
+  [augmented-ui~="exe"]::after {
+    background: var(--aug-border-bg, none);
+  }
+}
 [augmented-ui~="exe"]::before {
   content: "";
   display: var(--aug-inset-bg, none);
@@ -1227,57 +1233,9 @@
   );
 }
 
-/* Safari */
-@supports (not (clip-path: polygon(0 0, 100% 0, 50% 50%))) and (-webkit-clip-path: polygon(0 0, 100% 0, 50% 50%)) {
-  [augmented-ui~="border-el"],
-  [augmented-ui~="exe"]::after {
-    -webkit-clip-path: polygon(
-      var(--aug-_TlPathInset1, var(--aug-_W) var(--aug-_W))
-      var(--aug-_TPathInset1, ),
-      var(--aug-_TrPathInset1, var(--aug-_100W) var(--aug-_W))
-      var(--aug-_RPathInset1, ),
-      var(--aug-_BrPathInset1, var(--aug-_100W) var(--aug-_100W))
-      var(--aug-_BPathInset1, ),
-      var(--aug-_BlPathInset1, var(--aug-_W) var(--aug-_100W))
-      var(--aug-_LPathInset1, ),
-      var(--aug-_TlInset1JoinBX, var(--aug-_W)) var(--aug-_TlInset1JoinBY, var(--aug-_W)),
-      0px var(--aug-_TlInset1JoinBY, var(--aug-_W)),
-      0px 100%, 100% 100%, 100% 0px, 0px 0px,
-      0px var(--aug-_TlInset1JoinBY, var(--aug-_W)),
-      var(--aug-_TlInset1JoinBX, var(--aug-_W)) var(--aug-_TlInset1JoinBY, var(--aug-_W))
-    );
-  }
-  [augmented-ui~="inset-el"],
-  [augmented-ui~="exe"]::before {
-    -webkit-clip-path: polygon(
-      var(--aug-_TlPathInset2, var(--aug-_WD) var(--aug-_WD))
-      var(--aug-_TPathInset2, ),
-      var(--aug-_TrPathInset2, var(--aug-_100WD) var(--aug-_WD))
-      var(--aug-_RPathInset2, ),
-      var(--aug-_BrPathInset2, var(--aug-_100WD) var(--aug-_100WD))
-      var(--aug-_BPathInset2, ),
-      var(--aug-_BlPathInset2, var(--aug-_WD) var(--aug-_100WD))
-      var(--aug-_LPathInset2, )
-    );
-  }
-  [augmented-ui~="exe"],
-  [augmented-ui~="before"]::before,
-  [augmented-ui~="after"]::after {
-    -webkit-clip-path: polygon(
-      var(--aug-_TlPath, 0px 0px)
-      var(--aug-_TPath, ),
-      var(--aug-_TrPath, 100% 0px)
-      var(--aug-_RPath, ),
-      var(--aug-_BrPath, 100% 100%)
-      var(--aug-_BPath, ),
-      var(--aug-_BlPath, 0px 100%)
-      var(--aug-_LPath, )
-    );
-  }
-}
-
-/* Edge, pre Chromium */
-@supports (not (clip-path: polygon(0 0, 100% 0, 50% 50%))) and (not (-webkit-clip-path: polygon(0 0, 100% 0, 50% 50%))) {
+/* -webkit-clip-path is unreliable, fallback removed. Worked on Opera 41 but not in Safari 12.1 on iOS */
+/* pre chromium Edge, safari, old Opera */
+@supports (not (clip-path: polygon(0 0, 100% 0, 50% 50%))) {
   /* vvv almost all of the code here avoids this: https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/17410857/ for 5 layers of inheritance vvv */
 
   /* Step 1: set up any pseduo-level vars on main elements first (setup for any el that uses them to avoid repeat, not just pseudo parents) */

index.html

@@ -165,8 +165,8 @@ <h3>Namespaced to avoid crossing wires.</h3>
         </ul>
         <h3>Automatic fallbacks and feature detection.</h3>
         <ul>
-          <li>Uses the polygon() shape feature for (-webkit-)clip-path, putting full support user reach around 92%</li>
-          <li>More details below!</li>
+          <li>Requires unprefixed clip-path for full support (today's global reach ~70%)</li>
+          <li>Great automatic fallback for older browsers (~92% global reach). More details below!</li>
         </ul>
         <h3>Use augmented-ui in any project, for free.</h3>
         <ul>
@@ -186,7 +186,7 @@ <h3>Use augmented-ui in any project, for free.</h3>
         <h2>aug-attr-<em class="glitch" data-text="spliced">spliced</em>.js</h2>
 
         <div class="section-2-text">
-          Skip the &lt;HTML&gt;, stick to {CSS}<br>
+          Skip the attribute, stick to {CSS}<br>
           Import <em>aug-attr-spliced.js</em> to have the<br>
           <em>augmented-ui</em> attributes automatically
           added and updated, live, from your CSS to
@@ -253,7 +253,7 @@ <h3>Use aug-attr-spliced.js in any project, for free.</h3>
       </div>
     </div>
     <div class="section-3">
-      <div class="monitor" augmented-ui="tl-clip tr-clip br-clip bl-clip">
+      <div class="monitor" augmented-ui="tl-clip tr-clip br-clip bl-clip exe">
         fallbacks and browser support
       </div>
     </div>

site/section-3.css

@@ -3,3 +3,16 @@
   height: 600px;
   position: relative;
 }
+
+.monitor {
+  width: calc(100% - 600px);
+  height: 500px;
+  --aug-border: 20px;
+  --aug-border-bg: #ffd700;
+  --aug-tl: 40px;
+  --aug-tr: 40px;
+  --aug-br: 40px;
+  --aug-bl: 40px;
+  --aug-inset: 20px;
+  --aug-inset-bg: orange;
+}

site/test.html

@@ -301,11 +301,11 @@
         Default: 1<br>
         Accepts: number between 0 and 1 inclusive with no unit<br>
         <br>
-        /// fallback values for browsers without clip-path or -webkit-clip-path (pre-chromium Edge) ///<br>
+        /// fallback values for browsers without clip-path (-webkit-clip-path is unreliable) (Safari, pre-chromium Edge, Old Opera) ///<br>
         <b>--aug-border-radius-fallback</b><br>
         Default: an automatic calculation based on size of any corresponding corner aug equipped to the element.<br>
         Accepts: same as css border-radius<br>
-        Note: augs along the edges are not rendered or considered in pre-chromium Edge at all, only corner augs are simulated<br>
+        Note: augs along the edges are not rendered or considered for these browsers, only corner augs are simulated<br>
         <br>
         <b>--aug-border-radius-fallback-inset</b><br>
         Default: an automatic calculation based on size of any corresponding corner aug equipped to the element, minus the (border width + inset distance).<br>