diff options
| author | Oskar Nyberg <oskar@mullvad.net> | 2022-02-18 11:38:38 +0100 |
|---|---|---|
| committer | Oskar Nyberg <oskar@mullvad.net> | 2022-02-18 11:38:38 +0100 |
| commit | 1e916c60603309757db3617fe3c56d570749cf95 (patch) | |
| tree | f2967cfceb7ccd82d459dc2c9126b9d71e931426 /gui/src | |
| parent | 1d6c0eefcc9f4fab49d15cc9a78c2c80922b283e (diff) | |
| parent | d77eae334149633df4b6fa963a693d7ff08f3973 (diff) | |
| download | mullvadvpn-1e916c60603309757db3617fe3c56d570749cf95.tar.xz mullvadvpn-1e916c60603309757db3617fe3c56d570749cf95.zip | |
Merge branch 'make-marquee-use-gpu'
Diffstat (limited to 'gui/src')
| -rw-r--r-- | gui/src/renderer/components/Marquee.tsx | 17 |
1 files changed, 7 insertions, 10 deletions
diff --git a/gui/src/renderer/components/Marquee.tsx b/gui/src/renderer/components/Marquee.tsx index 427ab81780..7a981b4aef 100644 --- a/gui/src/renderer/components/Marquee.tsx +++ b/gui/src/renderer/components/Marquee.tsx @@ -6,16 +6,13 @@ const Container = styled.div({ overflow: 'hidden', }); -const Text = styled.span( - { - position: 'relative', - whiteSpace: 'nowrap', - }, - (props: { overflow: number; alignRight: boolean }) => ({ - left: props.alignRight ? -props.overflow + 'px' : '0', - transition: `left linear ${props.overflow * 80}ms`, - }), -); +const Text = styled.span({}, (props: { overflow: number; alignRight: boolean }) => ({ + display: 'inline-block', + whiteSpace: 'nowrap', + willChange: 'transform', + transform: props.alignRight ? `translate(${-props.overflow}px)` : 'translate(0)', + transition: `transform linear ${props.overflow * 80}ms`, +})); interface IMarqueeProps { className?: string; |