Request #47849

(Currently am not/when I ran these tests wasn't using Dreamwidth's Canary version)

Tested on Windows 10 and Windows 11 in:
--Firefox
--Troubleshooting Mode within Firefox
--Edge
--IE 11 mode within Edge
--Opera (Win10) and Opera One (Win11)
--Chromium dev build

--First issue: Missing/hard to find and use scrollbar, Firefox on Win11 only

The CSS editor and theme layer compiler are partially missing their scrollbars in Firefox on Windows 11 only (all pics here set to public). I've uploaded screencaps of each:
https://marahmarie.dreamwidth.org/file/633911.jpg (CSS editor missing scrollbar)
https://marahmarie.dreamwidth.org/file/637823.jpg (theme layer compiler missing scrollbar)

The screencaps show all visible lines of code in each textbox with no scrollbar. If instead I use my laptop's Down Arrow to scroll then a very thin, hard to see scrollbar, similar to Win11's default scrollbar in Explorer, shows up at the end of each textbox. Alternately if I "grab" one of the four corners of the textbox with my cursor the scrollbar also briefly shows up.

If I don't start using the scrollbar immediately it disappears within a few seconds and the process of having to somehow find it again must be repeated and the scrollbar doesn't stay visible once I stop using the Arrow keys, scrolling with the scrollbar or let go of one of the textbox corners I grabbed.

This issue doesn't show up in Firefox on Win10 nor does it show up in any other browser on Win10 or Win11 so it seems to be an issue in Firefox on Win11 only.

--Second issue: Browser Find (Ctrl+F) functionality only half-working anywhere I try it

On both Windows 10 and Windows 11 in all browsers listed above Find only seems to work slightly past the visible portion of the CSS editor's textbox and only slightly past the visible portion of the theme layer compiler's textbox.

I've uploaded screencaps showing the CSS editor not being able to find existing text somewhere past the visible portion of the textbox and of the compiler doing the same:
https://marahmarie.dreamwidth.org/file/637033.jpg (Firefox w/ ABP add-on disabled on Win11)
https://marahmarie.dreamwidth.org/file/635254.jpg (Opera on Win10)

I can't figure out exactly where past the visible portion of code that Find stops finding what I look for.

If I disable JS in Firefox, Find finds anything in any part of the textboxes like it should, so the issue seems tied to that somehow.

(And Find functionality doesn't seem to work in Firefox on Win11 at all if Adblock Plus is enabled; mentioning solely for ABP users to be advised of in the future; not part of my support request.)

--Third issue: Textbox expanders are missing anywhere I look for them

On both Windows 10 and Windows 11 in all browsers listed above the triangular shaped expander in the lower right hand corner we pull on with our cursors to "expand" (widen) the size of the textbox is missing from the CSS editor's textbox and the theme layer compiler's textbox.

Disabling JS in Firefox seems to "fix" this issue (expander is restored) so it seems likely also tied into the JS overlay somehow.

--Incidentals

On both Windows 10 and Windows 11 in all browsers listed above the Javascript overlay used to add line numbers and syntax highlighting flashes in on page load on the CSS editor alone causing the old-style (black and white) textbox to fully load only to be replaced by the overlay a few seconds later. Not mentioning it as an issue so much as it's simply confusing.

Incidentally x2 (doesn't relate to the above issues except "happens on the same page"): On both Windows 10 and Windows 11 in all browsers listed above the link to edit my theme layer: https://www.dreamwidth.org/customize/advanced/layeredit?id= isn't working. I get brought to an error page saying: "Error: You have not specified a layer to edit".

I think it's because it's not appending my theme layer's number (916557) to the link embedded in the page (this happens at both https://www.dreamwidth.org/customize/options and https://www.dreamwidth.org/customize/options?group=customcss) so instead it just errors out.

The only way I can access it is via Advanced Customization-->Your Layers-->916557-->Edit layer, though alternately I can also bookmark it.

Incidentally x3 (also found on the same CSS editor page); though I don't use the feature maybe some of us still do: on both Windows 10 and Windows 11 in all browsers listed above there's a line under the CSS editor's textbox that says: "To insert indentation or open the code hint menu, press Ctrl + m." This also doesn't work in any browser on Win10 or Win11.

---

Diagnostics: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:109.0) Gecko/20100101 Firefox/116.0