Jumping reply box

Contribute UX

AI-generated summary

Jumping reply box

A bug is reported where the reply box jumps around when placed at the bottom of a post in a topic with replies. The issue occurs in Firefox and Chrome, and is reproducible with specific browser window sizes. Vaping_Community provided steps to reproduce and a video of the issue.

Users have reported the issue with different browser window sizes and resolutions, including notriddle (1280x720) and featheredtoast (1000x540). A scrollbar appears when scrolling past the last topic, and disappears when moving back up.

A possible solution is proposed by Vaping_Community, adding a CSS rule to #topic-progress-wrapper.docked. The issue seems to be related to the composer detaching from the sides of the browser window, as reported by tshenry. codinghorror suggests that @awesomerobot take a look at the issue when available.

1

Version of Discourse: v2.0.0.beta5 +75
Browser: Firefox Quantum 59.0.2 (64-bit)
Screen Res: 1366 x 768

How to reproduce:
Place the top of the reply box on the bottom of the post in a topic with replies.

reply-jump
reply-jump1366×768 60.2 KB

#reply-control .reply-area {
    margin: 0 auto;
    padding: 5px 15px;
    box-sizing: border-box;
    height: calc(100% - 11px);
    width: 99%;   << Setting the width to 99% fixed it for me
}
1 Like
2

So very wide but not very tall? What is the actual window size in pixels?

1 Like
3

Can you please elaborate I have no idea what you mean, sorry

4

I can reproduce in Firefox with a 1280x720 browser window, on meta, by picking Laptop in “Responsive Design Mode”, scrolling around, and noticing the scrollbar at the bottom appear and disappear as I do so. I notice that the scrollbar appears when I pass the bottom of the post stream, and does not appear while I’m in the middle of the post stream.

1 Like
6

I can also reproduce in Chrome - from my testing - $(window).width() is 1000, $(window).height() is 540.

When scrolling past the last topic, the horizontal scrollbar appears and $(window).height() becomes 523. There is a “sweet spot” when the jumping occurs in which the horizontal scroll appears and disappears without user interaction in between the last topic and past the topic.

5 Likes
7

I had reported this a little while back. Sounds like it might get looked into at some point:

1 Like
8

I’ll add that I’m using a Laptop with a 15" screen, resolution is 1366 x 768

Not only does the screen jump around, a scrollbar appears when you move past the last post

1 Like
9

Yep, also mentioned in my report :slightly_smiling_face: That’s the core of the problem. It looks like I can reproduce it up to about 1475px width. Once the composer “detaches” from the sides of the browser window, it goes away.

3 Likes
10

This works perfectly..


#topic-progress-wrapper.docked {

    right: 19vw;
    margin-right: 1px; <<< This works..

}
11

Maybe @awesomerobot can take a look when he has time.

4 Likes