From e43853d6b0aeda0dd0cf342e378977167a9ae614 Mon Sep 17 00:00:00 2001 From: Travis Ralston Date: Sat, 27 Feb 2021 12:02:24 -0700 Subject: [PATCH] Use a small fractional value instead --- src/components/views/rooms/ReadReceiptMarker.js | 12 +++++++----- 1 file changed, 7 insertions(+), 5 deletions(-) diff --git a/src/components/views/rooms/ReadReceiptMarker.js b/src/components/views/rooms/ReadReceiptMarker.js index 8b2f5d27b5..ba2b3064fd 100644 --- a/src/components/views/rooms/ReadReceiptMarker.js +++ b/src/components/views/rooms/ReadReceiptMarker.js @@ -156,12 +156,14 @@ export default class ReadReceiptMarker extends React.PureComponent { // then shift to the rightmost column, // and then it will drop down to its resting position // - // XXX: We use a `left: 1px` to trick velocity-animate into actually animating. This - // is a very annoying bug where if it thinks there's no change to `left` then it'll + // XXX: We use a fractional left value to trick velocity-animate into actually animating. + // This is a very annoying bug where if it thinks there's no change to `left` then it'll // skip applying it, thus making our read receipt at +14px instead of +0px like it - // should be. This does cause 1px of drift for read receipts, however nobody should - // notice this while it's also falling. - startStyles.push({ top: startTopOffset+'px', left: '1px' }); + // should be. This does cause a tiny amount of drift for read receipts, however with a + // value so small it's not perceived by a user. + // Note: Any smaller values (or trying to interchange units) might cause read receipts to + // fail to fall down or cause gaps. + startStyles.push({ top: startTopOffset+'px', left: '0.001px' }); enterTransitionOpts.push({ duration: bounce ? Math.min(Math.log(Math.abs(startTopOffset)) * 200, 3000) : 300, easing: bounce ? 'easeOutBounce' : 'easeOutCubic',