Merge branch 'transition-updates'

4 files changed, 6 insertions, 5 deletions

diff --git a/gui/src/renderer/components/Marquee.tsx b/gui/src/renderer/components/Marquee.tsx
index c65524d722..ed5999c279 100644
--- a/gui/src/renderer/components/Marquee.tsx
+++ b/gui/src/renderer/components/Marquee.tsx
@@ -12,8 +12,8 @@ const Text = styled.span({}, (props: { overflow: number; alignRight: boolean })
   // Prevents Container from adding 2px below the text.
   verticalAlign: 'middle',
   whiteSpace: 'nowrap',
-  willChange: 'transform',
-  transform: props.alignRight ? `translate(${-props.overflow}px)` : 'translate(0)',
+  willChange: props.overflow > 0 ? 'transform' : 'auto',
+  transform: props.alignRight ? `translate3d(${-props.overflow}px, 0, 0)` : 'translate3d(0, 0, 0)',
   transition: `transform linear ${props.overflow * 80}ms`,
 }));
 
diff --git a/gui/src/renderer/components/Modal.tsx b/gui/src/renderer/components/Modal.tsx
index 9273b9956e..723235a839 100644
--- a/gui/src/renderer/components/Modal.tsx
+++ b/gui/src/renderer/components/Modal.tsx
@@ -35,7 +35,7 @@ const ModalBackground = styled.div({}, (props: { visible: boolean }) => ({
   left: 0,
   right: 0,
   bottom: 0,
-  transition: 'all 150ms ease-out',
+  transition: 'background-color 150ms ease-out',
   pointerEvents: props.visible ? 'auto' : 'none',
   zIndex: 2,
 }));
diff --git a/gui/src/renderer/components/SvgMap.tsx b/gui/src/renderer/components/SvgMap.tsx
index 8b2c2deaf4..00745bede2 100644
--- a/gui/src/renderer/components/SvgMap.tsx
+++ b/gui/src/renderer/components/SvgMap.tsx
@@ -39,7 +39,7 @@ const zoomableGroupStyle: React.CSSProperties = {
 function getMarkerImageStyle(zoom: number) {
   return {
     width: '60px',
-    transform: `translate(${-30 / zoom}px, ${-30 / zoom}px) scale(${1 / zoom})`,
+    transform: `translate3d(${-30 / zoom}px, ${-30 / zoom}px, 0) scale(${1 / zoom})`,
     transition: `transform ${MOVE_SPEED}ms ease-out`,
   };
 }
diff --git a/gui/src/renderer/components/TransitionContainer.tsx b/gui/src/renderer/components/TransitionContainer.tsx
index 6deeac5cd0..22ef1665eb 100644
--- a/gui/src/renderer/components/TransitionContainer.tsx
+++ b/gui/src/renderer/components/TransitionContainer.tsx
@@ -60,7 +60,8 @@ export const StyledTransitionContent = styled.div({}, (props: { transition?: IIt
     top: 0,
     bottom: 0,
     zIndex: props.transition?.inFront ? 1 : 0,
-    transform: `translate(${x}, ${y})`,
+    willChange: 'transform',
+    transform: `translate3d(${x}, ${y}, 0)`,
     transition: `transform ${duration}ms ease-in-out`,
   };
 });