Documentation links with fragments do not scroll in Chrome

[akshaydewan]

Browser: Google Chrome Version 76.0.3809.100 (Official Build) (64-bit)
OS: MacOS 10.14.6

Steps to reproduce:
Open a link to the documentation containing a fragment, such as this in Chrome

Expected: The page should scroll to Step 2: Material

Actual: The page doesn't scroll to the right section, stays on top of the page

(Works as expected on Firefox)

[ketan]

I can confirm that this used to work before, but not anymore. Surprisingly, it's not working on FF on my computer. - Ketan

…

On Mon, Aug 26, 2019 at 4:14 PM akshaydewan ***@***.***> wrote: Browser: Google Chrome Version 76.0.3809.100 (Official Build) (64-bit) OS: MacOS 10.14.6 Steps to reproduce: Open a link to the documentation containing a fragment, such as this <https://docs.gocd.org/19.8.0/configuration/quick_pipeline_setup.html#step-2-material> in Chrome Expected: The page should scroll to Step 2: Material Actual: The page doesn't scroll to the right section. (Works as expected on Firefox) — You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub <#356?email_source=notifications&email_token=AAACSZTS4L3FSTJOG7UWO6LQGOX2PA5CNFSM4IPOK552YY3PNVWWK3TUL52HS4DFUVEXG43VMWVGG33NNVSW45C7NFSM4HHLEEEQ>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AAACSZRKEOHG3WEV3524IOLQGOX2PANCNFSM4IPOK55Q> .

[arvindsv]

On Firefox at least, it seems to be related to the GDPR banner. For some reason, when the GDPR banner is added, the page stops being "split into two" (menu part and content part). So, when it tries to scroll the menu part of the page, it ends up scrolling the whole page.

You can see this behavior more clearly in a page such as: https://docs.gocd.org/19.8.0/configuration/managing_artifacts_and_reports.html#publishing-tests

On a pristine Chrome, it seems to work only the first time it is opened. Then, refreshing the page or even re-entering the URL does not switch to the right section, as @akshaydewan pointed out. :(

PS: Did one or both of you add the "Temporary Containers" add-on to Firefox recently? That causes the GDPR cookie to not exist (new container) and so you might be seeing it happen more often than usual.

[arvindsv]

Has Chrome changed the behavior of how it responds to fragments in URLs?

1. Go to: https://www.lipsum.com/#Lipsum-Unit5
2. It'll go to a specific part of the page.
3. Scroll up to the top.
4. Refresh. It doesn't move.
5. Press Enter in the URL bar. It doesn't move.

For Step 4 and 5, Firefox does the right thing.

Edit: Maybe it's a bug related to "Enable Text Fragment Anchor".

[akshaydewan]

I can confirm that https://www.lipsum.com/#Lipsum-Unit5 also isn't working as expected in Chrome. From this , looks like a deliberate change in behaviour.

(I haven't installed the Temporary Containers extension in FF. Didn't see the GDPR banner and was working fine. Tried a Private window, and the GDPR banner causes issues like you mentioned).

[arvindsv]

Something like putting the GDPR banner only in the page content part, rather than in the body and fixing the CSS will probably do the trick on FF:

diff --git a/static/javascripts/_common-to-all-pages.js b/static/javascripts/_common-to-all-pages.js
index 2470decd6..a61b724a4 100644
--- a/static/javascripts/_common-to-all-pages.js
+++ b/static/javascripts/_common-to-all-pages.js
@@ -20,7 +20,8 @@
         document.body.removeChild(banner);
       }
 
-      document.body.insertBefore(banner, document.body.firstChild);
+      const insertLocation = document.getElementsByClassName("book-page")[0];
+      insertLocation.insertBefore(banner, insertLocation.firstChild);
     }
   }

Maybe @veerababukona has some ideas?

[arvindsv]

Or, @marques-work