fix(reveal): fixes reveal in safari

Author: Michael Dougall

packages/core/src/motions/FocalRevealMove/__docs__/docs.mdx

@@ -196,7 +196,7 @@ import Motion, { FocalRevealMove, FocalTarget } from '@element-motion/core';
 
 <Props of={FocalRevealMove} />
 
-## Caveats
+## Gotchas
 
 Reveal works by default modifying the width and height of the element,
 starting from the [FocalTarget](/focal-target) element.

packages/core/src/motions/ReshapingContainer/index.tsx

@@ -165,7 +165,14 @@ export default class ReshapingContainer extends React.PureComponent<ReshapingCon
               />
 
               {/* Position relative/zIndex needed to position this above the floating background. */}
-              {children({ style: { position: 'relative', zIndex: 2, maxHeight } })}
+              {children({
+                style: {
+                  maxHeight,
+                  zIndex: 2,
+                  // Using position: relative fucks out in Safari with clip-path resulting in clip-path not transitioning
+                  position: 'relative',
+                },
+              })}
             </ComponentAs>
           )}
         </Move>

packages/core/src/motions/Reveal/__docz__/docs.mdx

@@ -22,9 +22,16 @@ import { Reveal } from '@element-motion/core';
 
 <Props of={Reveal} />
 
-## Caveats
+## Gotchas
+
+### Collapsing margins
 
 Be careful of collapsing margins when utilising this motion,
 they will make the destination element jump around,
 probably.
 If you're seeing some odd behavior - maybe try a flex container instead.
+
+### Composing with move
+
+When composing with any motion that uses `transform` or `position: relative`,
+Reveal will not work in Safari - follow the bug here: https://bugs.webkit.org/show_bug.cgi?id=196731.

packages/core/src/motions/Reveal/index.tsx

@@ -57,10 +57,9 @@ export default class Reveal extends React.Component<RevealProps> {
         data.origin.elementBoundingBox
           ? {
               ...prevStyles,
+              WebkitClipPath: `inset(${topOffset}px ${right}px ${bottom}px ${leftOffset}px)`,
               clipPath: `inset(${topOffset}px ${right}px ${bottom}px ${leftOffset}px)`,
-              opacity: 1,
-              visibility: 'visible',
-              willChange: combine('clip-path')(prevStyles.willChange),
+              willChange: combine('clip-path, -webkit-clip-path')(prevStyles.willChange),
             }
           : undefined,
     });
@@ -78,10 +77,11 @@ export default class Reveal extends React.Component<RevealProps> {
     setChildProps({
       style: prevStyles => ({
         ...prevStyles,
+        WebkitClipPath: 'inset(0px)',
         clipPath: 'inset(0px)',
-        transition: combine(`clip-path ${calculatedDuration}ms ${timingFunction}`)(
-          prevStyles.transition
-        ),
+        transition: combine(
+          `-webkit-clip-path ${calculatedDuration}ms ${timingFunction}, clip-path ${calculatedDuration}ms ${timingFunction}`
+        )(prevStyles.transition),
       }),
     });
 

packages/core/src/motions/RevealReshapingContainer/__docz__/docs.mdx

@@ -118,7 +118,7 @@ import { ReshapingContainer } from '@element-motion/core';
 
 <Props of={ReshapingContainer} />
 
-## Caveats
+## Gotchas
 
 Be careful of collapsing margins when utilising this motion,
 they will make the destination element jump around when revealing,

packages/core/src/motions/RevealReshapingContainer/index.tsx

@@ -66,6 +66,7 @@ export default class RevealReshapingContainer extends React.PureComponent<
   render() {
     const { children, duration, timingFunction, triggerKey } = this.props;
 
+    // The Move transition using transform fucks out in Safari with clip-path resulting in clip-path not transitioning
     return (
       <ReshapingContainer {...this.props}>
         {reshaping => (