x/pkgsite: <input class="DetailsHeader-pathInput"> element is floating strangely

[dmitshur]

What is the URL of the page with the issue?

https://pkg.go.dev/cmd/link?tab=doc

What is your user agent?

Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_3) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/80.0.3987.149 Safari/537.36

Screenshot

What did you do?

I visited the page.

What did you expect to see?

A consistent page background.

What did you see instead?

An <input> element floating strangely on the left hand side.

Its CSS properties are:

left: -62rem;
position: absolute;
top: 62rem;

This might be related to #36809.

/cc @jba @julieqiu

[jba]

An input element is needed to support copying to the clipboard. (Unless it isn't. That would be nice. But as far as I know it is.)

I had to put that element somewhere. I guess I didn't put it far enough away.

[dmitshur]

Do you know if making its opacity 0 is a viable alternative?

[nyaa8]

An input element is needed to support copying to the clipboard. (Unless it isn't. That would be nice. But as far as I know it is.)

I had to put that element somewhere. I guess I didn't put it far enough away.

Hello!

There is Clipboard API but it requires permission from Permissions API. Unfortunately, Internet Explorer doesn't support this at all.

Clipboard API compatibility chart:

Permissions API compatibility chart:

Thank you 🙇‍♀️

[gopherbot]

Change https://golang.org/cl/238477 mentions this issue: content/static/css: hide pathInput element on larger displays

[nyaa8]

Tested the change on 3840 x 2160 px display:

And on 1920 x 1080 px display:

I just changed -62rem to -50vw, so it should always "hide" correctly:

.DetailsHeader-pathInput {
  /*
   * An input element that can be selected so its contents can be
   * copied to the clipboard. We can't use a hidden element, so
   * put this visible one very far off the screen.
   */
  left: -50vw;
  position: absolute;
  top: 62rem;
}

Maybe top should be changed as well (to e.g. 50vh)?

Thank you for your time 🙇‍♀️

[julieqiu]

Thank you, @nyaascii!