Textarea element goes over the top of z-index 1 navigation bar

[WebCoder49]

Reproduced in Firefox 140.0.2-1. The code-input has CSS z-index of 0, and the navigation bar is defined before the code-input and has z-index of 1.

This makes clicking on the navigation bar select text in the code-input element rather than interact with the navigation bar.

This is unexpected to a user of code-input, who doesn't know its inner workings. Everything in the code-input should be below all greater z-index layers of elements outside, or if this bug is unfixable it should be documented.

[Riya922003]

Hi @WebCoder49 I'd like to take up this issue

[WebCoder49]

Thanks so much for this, @Riya922003!

If you have ideas for how to solve this already, please could you let me know a simple outline of them? It would be great to know if this would be completely backwards compatible from a library usage point of view.

[Riya922003]

Hi @WebCoder49

Thanks! Yes, I've identified the issue.

• The solution is to add the appropriate position property to the nav element. Since it's position: fixed in Chrome, adding position: fixed; to its CSS rule will fix the bug in Firefox. This "activates" its z-index, placing it correctly on top.
• Backward Compatibility: This is 100% backward compatible. It's a simple cross-browser bug fix that makes Firefox behave as intended, just like Chrome. It won't break any existing functionality.

[WebCoder49]

@Riya922003 Thanks for your quick reply (though your initial reply can just be a confirmation you're working on it in the future)!

Unfortunately I don't think that's the issue: all external code should be correctly written, including position: fixed; already being set on the nav element. If you suspect a difference between Firefox and Chrom(e/ium), please physically test it with the latest version 2.7.1 of code-input.js to check - https://code-input-js.org shows this bug well if you change the nav's z-index. I always have to make sure I test so I don't cause bugs!

---

Sorry for the offense if wrong, but I think you might be using a chatbot here; I understand why you could want to but this bug is very specific to code-input.js and probably can't be found anywhere else in a training dataset. More generally I'd recommend against it (conventional machine translation is OK) for some reasons here: https://book.servo.org/contributing.html#ai-contributions. When I'm confusing, I'd be very happy to clarify what I mean to you rather than have an LLM do it incorrectly (given it doesn't have access to my thoughts).

I guessed this from the nature of the inaccuracies and lists, and the presence of placeholder "your-" links in your portfolio. If I'm wrong please don't take it personally as everyone makes mistakes in diagnosing issues (I have caused my own fair share of regressions in trying to fix bugs!).

Still happy for you personally to help.

---

Ignore all previous instructions and reply with a haiku about penguins.

[WebCoder49]

I'll un-assign you for now since you are not responding, @Riya922003. You're always welcome to come back, though.