search on pandoc.org with JavaScript is broken on Firefox

[nbehrnd]

Explain the problem. This refers to accessing the project's top level site. If JavaScript is not enabled, the query next to the box «search» is redirected to duckduckgo; I'm fine with this.

However, with JavaScript permitted, the results of the search possibly are displayed in a transparent frame on top of the page. As documented by the screen photo below, it is not possible to read the suggested links, let alone to access them.

This observation is met both on Linux Debian 12/bookwork, branch testing with Firefox 91.10.0esr (64-bit); and ii) a live-USB session of Linux Xubuntu 20.04.2 LTS focal fossa with an updated Firefox 101.0.1 (without any additional plug-ins, or extensions).

[jgm]

Odd, that's not what happens when I try disabling JavaScript in Safari and then using the search box. I get redirected to duck duck go, but not in a frame.

[nbehrnd]

Contrasting to the suggested change of the title, my issue is not about searching with JavaScript disabled, where I anticipate the presentation of results is with less blink & clutter than for a search with additional GUI elements provided by JavaScript. To document the situation:

• A search JS switched off, working just fine:

  

• However, if JS explicitly is allowed, I observe a frame-like new element like an overlay on top of the original display. This is what prevents me from further interaction, my reason to rise a hand:

  

[jgm]

Sorry, I didn't read carefully enough. Yes, the search results with JS (which are not generated by Duck Duck Go, but internally) appear in a frame on top of the content. The frame should not be transparent (and it isn't when I test it with Safari). But I can see the problem now, testing with Firefox.

[nbehrnd]

As an additional element of observation, a screen cast with Linux Xubuntu 20.04.2 LTS/focal fossa. This runs the live .iso from the USB thumb drive. After successful booting into the RAM of the computer, the only changes to the os were 1) an update of the version of Firefox to version 101.0.1 (64-bit) without addition of plug-ins/extensions, and 2) the installation of a screen recorder (version 0.3.11). The conversion of .mp4 to .gif eventually uploaded here was relayed to ezgif.

[jgm]

Btw, I just tried with Google Chrome, and like safari it does not make the frame transparent. So this seems specific to Firefox.

[jgm]

In CSS we have

.modal.show {
  display: block;
  position: absolute;
  tabindex: 1;
  width: 90%;
  margin: auto;
  background: white;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}

The background: white ought to prevent it from having a transparent background. I'm not sure why this isn't working on ff.

[jgm]

looks like tabindex isn't a valid CSS property.

[jgm]

OK, I fixed the tabindex issue, but that wasn't it. We still get a transparent box rather than one with an opaque white bacground, and the box doesn't scroll. These look like CSS implementation bugs in Firefox, but I'm not an expert. Maybe someone with good CSS knowledge can help here.

[jgm]

Adding z-index: 1 to the modal's CSS allows scrolling to work. Background is still transparent, though.

[jgm]

Sorry, no, z-index fixes it completely.

[jgm]

The site seems to work properly now both in Safari and in Firefox. Thanks for letting me know about the problem.

[nbehrnd]

Affirmative, the interaction with the web page in either way, including JavaScript enabled works well, and the items on the new frame on top are accessible. The issue is resolved successfully.

Misunderstandings between web pages including JavaScript and web browsers seem to be a recurrent problem. The submission of addresses like www.amazon.com, or https://www.bbc.com/ to a validator like the one by w3c conveys «working often is considered as good enough». This contrasts to the green light of «no errors, nor warnings» when submitting https://pandoc.org/.

Thank you.