Composer preview scroll not syncing with editor


(Joshua Rosenfeld) #1

When posting a large amount of text, the composer preview scroll stops syncing with the editor. Once the preview is filled to the point of needing a scrollbar, the text being typed ends up below off the screen.

cc @tgxworld


(Jeff Atwood) #2

There needs to be a special case for “cursor at the bottom” where both panels stick to the bottom.

This is quite bad now @tgxworld such that I’d rather have the old behavior back…


(Alan Tan) #3

Can you provide me with the text to have a look?


(Joshua Rosenfeld) #4

I used the Lorem Ipsum generator. Unfortunately I don’t have the exact text, but this should work:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam pulvinar semper diam at accumsan. Morbi eu neque at neque porta convallis. Ut accumsan eleifend accumsan. Donec pharetra porta cursus. Integer ut sodales sem. Suspendisse libero ex, mollis et quam sit amet, ultrices commodo lectus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nulla et lectus aliquam lectus aliquet maximus. Duis vel turpis commodo odio vehicula malesuada sit amet at libero. Nulla volutpat, magna non consequat porta, arcu sem ullamcorper sapien, id accumsan eros dui a nisi. Vestibulum facilisis rhoncus nulla a hendrerit. Aliquam tincidunt sed nibh sed faucibus. Praesent ut nulla laoreet, imperdiet turpis ac, volutpat libero. Integer sollicitudin nunc eget commodo mattis. Nam euismod tempus enim id lobortis. Ut in feugiat metus.

Mauris bibendum ultrices quam, vitae sollicitudin lorem pharetra ut. Nam volutpat efficitur arcu, ut fringilla risus hendrerit vel. Etiam placerat quam a auctor porta. Phasellus et nibh tincidunt, faucibus nisl vitae, aliquam purus. Ut in lacinia sapien. Vestibulum sollicitudin nulla eget purus fringilla varius. Nullam congue nunc leo, a ornare velit condimentum placerat. Donec lacus tellus, ultrices ac lobortis in, condimentum quis tortor. Aliquam placerat faucibus felis vitae eleifend. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec quis laoreet urna. Maecenas dui augue, pulvinar laoreet nisl scelerisque, pharetra ultricies orci. Sed quis turpis tincidunt sem tincidunt placerat id id libero. Fusce pretium tristique leo, id volutpat elit pharetra a. Aenean at placerat nisl, quis interdum nisi.

Curabitur elementum, metus id mollis ultricies, odio justo mollis leo, et bibendum mi turpis sit amet erat. Nunc sit amet tellus dui. Aliquam quis luctus dui. Ut pulvinar sollicitudin nisl, vitae dapibus nibh volutpat non. Sed eget rutrum leo. Nulla at erat quis mi dictum ullamcorper a quis tellus. Duis varius elit a est egestas semper. Praesent ipsum mi, faucibus vitae lectus commodo, bibendum maximus leo. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nunc vitae aliquam leo. Proin mollis suscipit elit, vel mollis sapien bibendum quis. Nullam vestibulum, ipsum sit amet tempor dapibus, sem turpis posuere mi, id fermentum sem augue ac quam. Donec id arcu ultricies, convallis enim in, lacinia felis. Duis bibendum mauris vitae molestie gravida.

(Jeff Atwood) #5

It is trivial to repro, just get a lot of text in the textbox… note how I have moved the cursor around and even typed there at the bottom and preview is way at the top


(Alan Tan) #6

It looks like we had a special case for this previously which I nuked

if (($input.height() + $input.scrollTop() + 100) > inputHeight) {
  // cheat, special case for bottom      
  $preview.scrollTop(previewHeight);
   return;
}

I’ll look into adding that back in.


(Jeff Atwood) #7

Let’s try to get that back in ASAP because it is quite bad right now.


(Alan Tan) #8

Added back in


(Jeff Atwood) #9

I can’t think of any reason why a keypress at the last line of the editor should not immediately force a preview shift to scroll to the bottom as well.

That seems super, super safe to me, barring changing definitions of “the bottom”.


(Alan Tan) #10

Good point implemented in


(Joshua Rosenfeld) #13

Have another sync issue. The composer jumps like crazy with a video inserted when typing text. The video shows jumping with text above the video. The issue occurs with text below the video as well.


(Joshua Rosenfeld) #14

Pictures don’t jump so much, but scroll is off. I can’t see what I’m typing.


(Jeff Atwood) #15

@tgxworld are we sure these changes are a good idea? I don’t recall a whole lot of complaints about the way it was before, and we’re regressing a lot here? Maybe I am misunderstanding why these changes were made?


(Alan Tan) #16

For simple text the previous sync was working fine. However once images get involved, the sync is way off that it becomes unusable. Also, the previous solution didn’t allow us to sync the editor and preview when you’re scrolling through the preview.

Previous Sync

Current Sync

Hmm I think the new syncing solution that we’re using will take some time to stabilize. Should I push it to 2.0 instead?


(Sam Saffron) #17

I feel we can probably stabilize this in the next 2 weeks, just be sure to have some guards in for pathologic states


(Alan Tan) #18

Fixed the images problem in

was a regression from


(Alan Tan) #19

I just looked into this and this is not a result of the new sync implementation. Currently we’re back to the old sync implementation on meta and I can still see the video “dancing”. The problem is that typing while a video has been uploaded keeps reloading the video in the preview.


(Sam Saffron) #20

@tgxworld do we still need to keep this open?