Repository navigation
Prevent duplicate Ctrl+F results in Firefox #68
Description
Issue #65 has been solved in Chromium, but not in Firefox, so this tracks making the solution work in Firefox:
Issue #65 has been solved in Chromium, but not in Firefox, so this tracks making the solution work in Firefox:
Activity
WebCoder49 commentedon Dec 8, 2023
inertattribute may only scan one of each but give duplicate total? TODO: Check; if really needed this inconsistency could be solved with an issue in Firefox itself.SArpnt commentedon Dec 11, 2023
have you tried putting all the syntax highlighted text in an svg?
not that it's a good solution, it would likely be extremely annoying to wrap text and the font rendering might be different, but it should work
WebCoder49 commentedon Dec 11, 2023
@SArpnt Thank you for this suggestion - I will look into it if there is no simpler way to fix this.
SArpnt commentedon Dec 11, 2023
now that i think about it svg and canvas probably render the fonts differently, you might want to try both.
much better idea i just thought of, make all the text in the highlighted area completely invisible, and the text in the textarea visible instead. set background colors on elements around all the highlight texts, and use mix-blend-mode to recolor the text and background in the textarea.
i suggest setting the textarea to use white text on a transparent background, and using the multiply blend mode to set the colors. put another div behind it to set the background color. other methods would likely mess with subpixel antialiasing.
unfortunately this other method would probably have issues with diacritics that overlap other lines.
WebCoder49 commentedon Dec 12, 2023
In both Firefox and Chromium, annoyingly SVG
<text>elements are included in Ctrl+F results, but<canvas>text isn't.WebCoder49 commentedon Dec 18, 2023
@SArpnt your mix-blend-mode does work when set to
lightenordarken, and looks quite good but there are several caveats:blackorwhiteand has slightly different CSS properties depending on which one is chosen, requiring more user input.I feel that we're getting somewhere good in solving this problem, but the current fix is too visually intrusive. Do you have a value for the
mix-blend-modeproperty or another suggestion for how to fix this? It seems so difficult that nobody has dared to even comment on my StackOverflow question, so thank you so much for your suggestions!WebCoder49 commentedon Dec 18, 2023
FYI, my code for the light theme is in this commit, and for the dark theme I just changed
blacktowhite, vice versa, andlightentodarkenin thetextareastyles.SArpnt commentedon Dec 18, 2023
after looking around through various things, the best i can come up with is just rendering all the text to a canvas. everything else seems to have issues. i doubt this is good for performance.
some interesting (baffling and annoying) things i found about firefox text areas while experimenting with this:
if using background-clip:text, the textarea takes a full second to respond to scrolling
if there's enough text in a textarea that it can scroll, all subpixel antialiasing on the text disappears
WebCoder49 commentedon Jan 20, 2024
I think this issue isn't worth it (unless Firefox becomes like Chrome). I will close it and make a Ctrl+F find / Ctrl+H find+replace plugin like the Ctrl+G one.
WebCoder49 commentedon Sep 5, 2025
This has been fixed in Firefox by version 140.0.2!