Add browser prefix to examples site to fix CSS rendering

ryanhefner · Jun 21, 2018 · 8ec2b85 · 8ec2b85
1 parent c19cd5f
commit 8ec2b85
Show file tree

Hide file tree

Showing 7 changed files with 16 additions and 8 deletions.
diff --git a/docs/asset-manifest.json b/docs/asset-manifest.json
@@ -1,6 +1,6 @@
 {
   "main.css": "static/css/main.b9f7c8eb.css",
   "main.css.map": "static/css/main.b9f7c8eb.css.map",
-  "main.js": "static/js/main.20095120.js",
-  "main.js.map": "static/js/main.20095120.js.map"
+  "main.js": "static/js/main.db2f7e94.js",
+  "main.js.map": "static/js/main.db2f7e94.js.map"
 }
diff --git a/docs/index.html b/docs/index.html
@@ -1 +1 @@
-<!DOCTYPE html><html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no"><meta name="theme-color" content="#000000"><meta name="description" content=""><meta name="keywords" content=""><link rel="manifest" href="/react-timer-wrapper/manifest.json"><link rel="shortcut icon" href="/react-timer-wrapper/favicon.ico"><title>react-timer-wrapper - Composable React Timer component that passes its status to its children.</title><link href="https://fonts.googleapis.com/css?family=IBM+Plex+Mono:300,300i,400,400i,500,500i,700,700i|IBM+Plex+Sans:300,300i,400,400i,500,500i,700,700i" rel="stylesheet"><script src="https://cdn.polyfill.io/v2/polyfill.min.js"></script><script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script><script async defer="defer" src="https://buttons.github.io/buttons.js"></script><link href="/react-timer-wrapper/static/css/main.b9f7c8eb.css" rel="stylesheet"></head><body><noscript>You need to enable JavaScript to run this app.</noscript><div id="root"></div><script type="text/javascript" src="/react-timer-wrapper/static/js/main.20095120.js"></script></body></html>
+<!DOCTYPE html><html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no"><meta name="theme-color" content="#000000"><meta name="description" content=""><meta name="keywords" content=""><link rel="manifest" href="/react-timer-wrapper/manifest.json"><link rel="shortcut icon" href="/react-timer-wrapper/favicon.ico"><title>react-timer-wrapper - Composable React Timer component that passes its status to its children.</title><link href="https://fonts.googleapis.com/css?family=IBM+Plex+Mono:300,300i,400,400i,500,500i,700,700i|IBM+Plex+Sans:300,300i,400,400i,500,500i,700,700i" rel="stylesheet"><script src="https://cdn.polyfill.io/v2/polyfill.min.js"></script><script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script><script async defer="defer" src="https://buttons.github.io/buttons.js"></script><link href="/react-timer-wrapper/static/css/main.b9f7c8eb.css" rel="stylesheet"></head><body><noscript>You need to enable JavaScript to run this app.</noscript><div id="root"></div><script type="text/javascript" src="/react-timer-wrapper/static/js/main.db2f7e94.js"></script></body></html>
diff --git a/docs/service-worker.js b/docs/service-worker.js
diff --git a/docs/static/js/main.20095120.js.map b/docs/static/js/main.20095120.js.map
diff --git a/docs/static/js/main.20095120.js → docs/static/js/main.db2f7e94.js b/docs/static/js/main.20095120.js → docs/static/js/main.db2f7e94.js
diff --git a/docs/static/js/main.db2f7e94.js.map b/docs/static/js/main.db2f7e94.js.map
diff --git a/site/src/App.js b/site/src/App.js
@@ -232,7 +232,15 @@ render() {
                 <div className="percent-wrapper" data-percent={`${Math.round(timerProgress.loop.progress * 100)}%`}>
                   <p className="percent">{`${Math.round(timerProgress.loop.progress * 100)}%`}</p>
                   <div className="percent-bar" style={{width: `${timerProgress.loop.progress * 100}%`}} />
-                  <p className="percent white" style={{clipPath: `inset(0 ${(1 - timerProgress.loop.progress) * 100}% 0 0)`}}>{`${Math.round(timerProgress.loop.progress * 100)}%`}</p>
+                  <p
+                    className="percent white"
+                    style={{
+                      clipPath: `inset(0 ${(1 - timerProgress.loop.progress) * 100}% 0 0)`,
+                      webkitClipPath: `inset(0 ${(1 - timerProgress.loop.progress) * 100}% 0 0)`,
+                    }}
+                  >
+                    {`${Math.round(timerProgress.loop.progress * 100)}%`}
+                  </p>
                 </div>
               </ScrollTrigger>
               <div className="content">