Page jumps after clicking N Likes

Contribute Bug

AI-generated summary

The discussion revolves around a page jump issue that occurs when clicking on “N Likes” in Discourse. riking initially reported the issue and provided repro steps, but codinghorror and gerhard were unable to reproduce it. However, riking and codinghorror later found that the issue can be reproduced by clicking on the link and expanding likes twice.

eviltrout investigated the issue and suspected it to be a Chrome bug, as it doesn’t occur in Safari or Firefox. The issue appears to be related to changing the innerHTML of an element on the page after navigating back and forth. A potential workaround was suggested by sam through a commit on GitHub, although it’s not ideal and may require further amendment with the DOM diffing feature.

1

Repro steps:

  1. Click here: Add new metrics in the administration interface - #15 by riking
  2. Click on 3 Likes
  3. Press the back button
  4. Click the link again
  5. Click 3 Likes again
  6. Viewport should jump either up or down, causing more posts to load in and wrecking your read position
3개의 좋아요
2

Actually that does not repro for me, perhaps because I opened the link in a new window?

Nope, does not repro for me by clicking on the link here in this window either..

3

Yes, this only happens when the link is opened in the same tab (just tested on Chrome/Windows).
Weird, now it’s not happening anymore… :confused:

2개의 좋아요
4

If it doesn’t work, press back and try again.

2개의 좋아요
5

Aha so the proper repro is to do this twice:

  1. Click on the link
  2. Click to expand likes
  3. Click back
  4. Click on the link (again)
  5. Click to expand likes

Then I do indeed get the jumping behavior cc @eviltrout

2개의 좋아요
6

I just spent over an hour on this and I am still confused.

I am 99% sure at this point it’s a bug in Chrome, although I can’t find anyone else on the web reporting it. It seems that:

  • If you visit a topic page
  • Hit the back button
  • Go forward into a topic (needn’t be the same)
  • Adjust the innerHTML of any element on the page

Then the page will scroll randomly (usually upwards).

This only happens in Chrome for me, not Safari or Firefox. I used the Javascript debugger to isolate it down to a single innerHTML change, so it’s not jQuery. In fact, I can cause it outside of an event loop such as ember by just running a command like document.getElementById('post_25').innerHTML = 'hello'

I’m not sure how to proceed here – perhaps it will just be fixed shortly in Chrome? To make a bug report for them would involve tearing away many parts of Discourse until we could isolate it.

6개의 좋아요
7

I worked around this issue, successfully with:

https://github.com/discourse/discourse/commit/c3f08145b808dada9244194e0ea1ab55bff22f12

It’s not ideal but rerender is kind of rare and we may be amending this a bit with the DOM diffing.

5개의 좋아요