diff options
| author | Hank <hank@mullvad.net> | 2022-09-28 10:27:55 +0200 |
|---|---|---|
| committer | Hank <hank@mullvad.net> | 2022-10-03 10:54:56 +0200 |
| commit | 3c30778859c382859bcfcdb54d8b2dfdf6b1997b (patch) | |
| tree | 308785ab6731f713b5cfa939ff0733dc06c14086 | |
| parent | a70fe8c17f4995ba0061bcc594e45ad252e325b3 (diff) | |
| download | mullvadvpn-3c30778859c382859bcfcdb54d8b2dfdf6b1997b.tar.xz mullvadvpn-3c30778859c382859bcfcdb54d8b2dfdf6b1997b.zip | |
Use translate3d and update will-change for Marquee.tsx
| -rw-r--r-- | gui/src/renderer/components/Marquee.tsx | 4 |
1 files changed, 2 insertions, 2 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`, })); |