diff options
| author | Oskar Nyberg <oskar@mullvad.net> | 2022-02-17 16:54:39 +0100 |
|---|---|---|
| committer | Oskar Nyberg <oskar@mullvad.net> | 2022-02-18 11:38:09 +0100 |
| commit | 3ab5cba3ba8aaa4ede1b52147ee200be36c7c859 (patch) | |
| tree | fd366f6ad00f28d61a1d825fffec2ca10a9b75ff /gui | |
| parent | 1d6c0eefcc9f4fab49d15cc9a78c2c80922b283e (diff) | |
| download | mullvadvpn-3ab5cba3ba8aaa4ede1b52147ee200be36c7c859.tar.xz mullvadvpn-3ab5cba3ba8aaa4ede1b52147ee200be36c7c859.zip | |
Switch to translate from left css property
Diffstat (limited to 'gui')
| -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; |