PrivateCoffee/element-web
4
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 3

Offset read receipt start positions by 1px

Browse source 
As mentioned in 208faf6d46, the velocity-animate update causes read receipts to occasionally show up 14px to the right of where they should be. This is because the read receipt width is 14px, and velocity-animate will *not* translate `left` if it isn't changing. Unfortunately, it's smart enough to realize that `-0px` is `0px`, so we end up having to specify `1px`. 

The comment already mentions it, but this should have no perceived effect for the user. During development I could not tell if the 1px was being applied during the animation, implying that it's a meaningless value. It's a bit unfortunate for those who know that it's translating left by 1px, but hopefully they'll be able to unsee that in time.
This commit is contained in:
Travis Ralston 2021-02-26 22:24:36 -07:00
parent 208faf6d46
commit b3142d6138
1 changed files with 7 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
src/components/views/rooms/ReadReceiptMarker.js
View file

@ -155,7 +155,13 @@ export default class ReadReceiptMarker extends React.Component {
// then shift to the rightmost column, // then shift to the rightmost column,
// and then it will drop down to its resting position // and then it will drop down to its resting position
startStyles.push({ top: startTopOffset+'px', left: '0px' }); //
// 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
// 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' });
enterTransitionOpts.push({ enterTransitionOpts.push({
duration: bounce ? Math.min(Math.log(Math.abs(startTopOffset)) * 200, 3000) : 300, duration: bounce ? Math.min(Math.log(Math.abs(startTopOffset)) * 200, 3000) : 300,
easing: bounce ? 'easeOutBounce' : 'easeOutCubic', easing: bounce ? 'easeOutBounce' : 'easeOutCubic',