[www] Fix gatsbyjs#2136 (gatsbyjs#2160)

* Adjust strokeDashoffset, tidy * Switch from line to path * Give repainted elems their own layers in the compositor „repainted elems“ refers to the elements repainted in Safari.
mcallistersean · Sep 18, 2017 · 525f8b3 · 525f8b3
1 parent 2333521
commit 525f8b3
Show file tree

Hide file tree

Showing 4 changed files with 17 additions and 12 deletions.
diff --git a/www/src/components/card.js b/www/src/components/card.js
@@ -7,6 +7,7 @@ const Card = ({ children }) => (
     css={{
       boxSizing: `border-box`,
       display: `flex`,
+      transform: "translateZ(0)",
       [presets.Tablet]: {
         flex: `0 0 50%`,
         maxWidth: `50%`,
@@ -35,6 +36,7 @@ const Card = ({ children }) => (
       css={{
         padding: rhythm(presets.gutters.default / 2),
         paddingBottom: 0,
+        transform: "translateZ(0)",
         [presets.Mobile]: {
           padding: vP,
           paddingBottom: 0,

diff --git a/www/src/components/cards.js b/www/src/components/cards.js
@@ -11,6 +11,7 @@ const Cards = ({ children }) => (
       background: `#fff`,
       borderRadius: presets.radiusLg,
       boxShadow: `0 5px 20px rgba(25, 17, 34, 0.1)`,
+      transform: "translateZ(0)",
     }}
   >
     {children}

diff --git a/www/src/components/diagram.js b/www/src/components/diagram.js
@@ -26,7 +26,7 @@ const stripeBg = {
 }
 const lineAnimation = css.keyframes({
   to: {
-    strokeDashoffset: 1000,
+    strokeDashoffset: 10,
   },
 })
 
@@ -60,6 +60,7 @@ const SegmentTitle = ({ children }) => (
       ...scale(-2 / 5),
       lineHeight: 1,
       textTransform: `uppercase`,
+      transform: "translateZ(0)",
     }}
   >
     {children}
@@ -73,17 +74,15 @@ const VerticalLine = () => (
     viewBox="0 0 20 30"
     css={{ margin: `0 auto`, display: `block` }}
   >
-    <line
-      className="path"
-      x1="10"
-      x2="10"
-      y1="110"
-      y2="-10"
-      stroke={presets.brandLight}
-      strokeWidth="3"
-      strokeLinecap="round"
-      strokeDasharray="0.5, 10"
-      css={{ animation: `${lineAnimation} 40s linear infinite` }}
+    <path
+      d="M10 40 L10 -10"
+      css={{
+        stroke: presets.brandLight,
+        strokeWidth: "3",
+        strokeLinecap: "round",
+        strokeDasharray: "0.5 10",
+        animation: `${lineAnimation} 400ms linear infinite`
+      }}
     />
   </svg>
 )
@@ -101,6 +100,7 @@ const borderAndBoxShadow = {
   width: `100%`,
   boxShadow: `0 5px 15px rgba(0,0,0,0.035)`,
   borderRadius: presets.radius,
+  transform: "translateZ(0)",
 }
 
 const SourceItems = ({ children }) => (

diff --git a/www/src/components/used-by.js b/www/src/components/used-by.js
@@ -47,6 +47,7 @@ const UsedBy = () => (
         .animation.curveDefault}`,
       order: `3`,
       flexGrow: `1`,
+      transform: "translateZ(0)",
       [presets.Phablet]: {
         paddingTop: rhythm(4),
         marginBottom: 0,
@@ -77,6 +78,7 @@ const UsedBy = () => (
         flexGrow: `1`,
         flexShrink: `1`,
         alignSelf: `flex-end`,
+        transform: "translateZ(0)",
         [presets.Phablet]: {
           flexGrow: `0`,
         },