2 files changed, 9 insertions, 2 deletions
diff --git a/packages/website/ts/components/ui/animation.tsx b/packages/website/ts/components/ui/animation.tsx
index 136f3d005..943e3bf28 100644
--- a/packages/website/ts/components/ui/animation.tsx
+++ b/packages/website/ts/components/ui/animation.tsx
@@ -14,21 +14,29 @@ const appearFromBottomFrames = keyframes`
         position: fixed;
         bottom: -500px;
         left: 0px;
+        right: 0px;
     }
 
     to {
         position: fixed;
         bottom: 0px;
         left: 0px;
+        right: 0px;
     }
 `;
 
+const stylesForAnimation: { [K in AnimationType]: string } = {
+    // Needed for safari
+    easeUpFromBottom: `position: fixed`,
+};
+
 const animations: { [K in AnimationType]: string } = {
     easeUpFromBottom: `${appearFromBottomFrames} 1s ease 0s 1 forwards`,
 };
 
 export const Animation = styled(PlainAnimation)`
     animation: ${props => animations[props.type]};
+    ${props => stylesForAnimation[props.type]};
 `;
 
 Animation.displayName = 'Animation';
diff --git a/packages/website/ts/components/ui/overlay.tsx b/packages/website/ts/components/ui/overlay.tsx
index 8b126a6d5..da26317de 100644
--- a/packages/website/ts/components/ui/overlay.tsx
+++ b/packages/website/ts/components/ui/overlay.tsx
@@ -4,7 +4,6 @@ import * as React from 'react';
 import { zIndex } from 'ts/style/z_index';
 
 export interface OverlayProps {
-    children?: React.ReactNode;
     style?: React.CSSProperties;
     onClick?: () => void;
 }
@@ -19,7 +18,7 @@ const style: React.CSSProperties = {
     backgroundColor: 'rgba(0, 0, 0, 0.6)',
 };
 
-export const Overlay: React.StatelessComponent = (props: OverlayProps) => (
+export const Overlay: React.StatelessComponent<OverlayProps> = props => (
     <div style={{ ...style, ...props.style }} onClick={props.onClick}>
         {props.children}
     </div>