Loading a page with some google context breaks the CSS

[tavurth]

Your Godot version: https://docs.godotengine.org/en/stable

Issue description:

When I load this URL from google, which includes search parameters, the pages CSS is broken.

When I load [the url with the context parameters stripped](, the page renders correctly

URL to the documentation page: URL

[tavurth]

Minimal reproduction URL is as follows:

https://docs.godotengine.org/en/stable/tutorials/misc/gles2_gles3_differences.html#:~:text="GLES3"W

Note the W after the closing "

[akien-mga]

What is your OS and browser?

I don't seem to reproduce the issue on Mageia 9 (Linux) with either Firefox Nightly (89.0a1 (2021-03-28)) and Chrome Stable (89.0.4389.90).

[YuriSizov]

That's an old Chrome issue that I don't think we can do much about. Browser tries to be smart and scrolls unscrollable block as a result.

[tavurth]

What is your OS and browser?

My browser is the latest Chrome version (updated just now)

I've checked without any extensions running and it's still the same issue.

[tavurth]

On Chromium (Brave browser) and Firefox this is working correctly for me.

[belzecue]

I get this bug on Chrome for both Windows and Linux. It has been happening for a long time.

Any google search for a snippet of text creates a first-result target URL that triggers the "text highlight" feature of Chrome.

For example, using Chrome and with Google set as the default search engine, type this search phrase into a google search bar -- including the quotes, which makes google search for that exact phrase:

"Nodes are Godot's building blocks."

Here's a shortcut for that exact search.

That gives a top result in "featured snippet" format. The URL for that link appends the "#:~:text=" locator:

https://docs.godotengine.org/en/stable/classes/class_node.html#:~:text=Nodes%20are%20Godot's%20building%20blocks,nodes%20is%20called%20a%20scene.

The inclusion of the "#:~:text=" code breaks Godot Doc's layout.

[Calinou]

This does not break page rendering on Firefox 98 (tested with a manually generated fragment link):

https://docs.godotengine.org/en/stable/classes/class_node.html#:~:text=nodes%20are%20godot's%20building%20blocks

I tried pasting the URL @belzecue posted, but it doesn't highlight anything in Firefox (and it doesn't break page rendering either).

I think this is a browser bug, especially since I have no idea how we're supposed to fix this on our end.

[tavurth]

Working for me in Chrome 101.0.4951.15

[belzecue]

I'm going to assume it's Chrome doing something funky with the text highlighting, but only under certain conditions.

I found an online browser link tester and put in one of the text-highlight URLs that reliably triggers the issue in Chrome for me. The test result was unaffected. This was using Windows 7 and Chrome 94 on their end -- the only free tier available.

I tried switching to a Guest profile in my Chrome 100.0.4896.60 on Windows, then pasted the known triggering link, and got the style issue right away. So that should rule out the usual suspects (cookies, cache, and extensions) on my end.

Not much anyone can do right now. I'll keep trying different things to see if I can figure out a repro.

[YuriSizov]

I wonder if we should "fix" this the same way we are fixing annoying highlights: https://github.com/godotengine/godot-docs/pull/5792

[panreyes]

As I mentioned in #7933, I believe a quick & dirty workaround (my preferred solutions, as always 😅) would be adding these lines to custom.js:

document.addEventListener('DOMContentLoaded', function() {
   window.scrollTo(0, window.scrollY);
}, false);

I'm sorry to say that I currently don't have time to download and compile the documentation to check it, but copy pasting window.scrollTo(0, window.scrollY); in the Google Chrome developer console after loading the website fixes my view.

[panreyes]

I'm glad I could check and fix this by downloading the HTML version of the docs instead of having to prepare and build everything :)

[tavurth]

This happened to me yesterday in the latest Firefox:

I hadn't seen this in a while since it was fixed for chrome.

When I resized the page it fixed it however, and then when I resized back to the original size it remained fixed.

This was the url:

https://docs.godotengine.org/en/stable/classes/class_randomnumbergenerator.html#class-randomnumbergenerator-method-randfn

[panreyes]

(I'm so silly, I originally made the pull request to my own repo 🤦‍♂️)

Please check it soon. It's really uncomfortable not being able to click any Godot docs links 😅

[mhilbrunner]

I've just merged https://github.com/godotengine/godot-docs/pull/9015 for master, which should show up on latest docs soon. If no issues crop up, we'll cherry-pick that to the stable docs branches.