Skip to content

style: use group opacity for text selection to fix overlapping artifacts #20564

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Open
kairosci wants to merge 5 commits into
base: master
Choose a base branch
from
Open

style: use group opacity for text selection to fix overlapping artifacts #20564

kairosci wants to merge 5 commits into from
+36 −17

Conversation

@kairosci
Copy link

@kairosci kairosci commented Jan 10, 2026 •
edited
Loading

Description

This PR addresses visual artifacts where text selection boxes would overlap incorrectly.
By applying group opacity and using mix-blend-mode, we ensure that the selection highlight renders correctly on Chrome and other browsers.

Issue fixed

Fixes #17561

Type of changes

  • Bug fix (non-breaking change which fixes an issue)
  • New feature (non-breaking change which adds functionality)
  • Breaking change (fix or feature that would cause existing functionality to not work as expected)

Checklist

  • I have read the CONTRIBUTING document.
  • I have added tests to cover my changes.
  • All new and existing tests passed.

@kairosci kairosci changed the title Fix regression #17561: Text-selection boxes visually overlap fix: Fix text-selection boxes visually overlap Jan 10, 2026
@nicolo-ribaudo
Copy link
Contributor

nicolo-ribaudo commented Jan 12, 2026

/botio preview

@moz-tools-bot
Copy link
Collaborator

moz-tools-bot commented Jan 12, 2026

From: Bot.io (Linux m4)

Received

Command cmd_preview from @nicolo-ribaudo received. Current queue size: 0

Live output at: http://54.241.84.105:8877/ec4a36296087ca7/output.txt

@moz-tools-bot
Copy link
Collaborator

moz-tools-bot commented Jan 12, 2026

From: Bot.io (Windows)

Received

Command cmd_preview from @nicolo-ribaudo received. Current queue size: 0

Live output at: http://54.193.163.58:8877/229f1fcad949cbc/output.txt

@moz-tools-bot
Copy link
Collaborator

moz-tools-bot commented Jan 12, 2026

From: Bot.io (Linux m4)

Success

Full output at http://54.241.84.105:8877/ec4a36296087ca7/output.txt

Total script time: 1.00 mins

Published

@moz-tools-bot
Copy link
Collaborator

moz-tools-bot commented Jan 12, 2026

From: Bot.io (Windows)

Success

Full output at http://54.193.163.58:8877/229f1fcad949cbc/output.txt

Total script time: 3.51 mins

Published

@nicolo-ribaudo
Copy link
Contributor

nicolo-ribaudo commented Jan 12, 2026 •
edited
Loading

Unfortunately this PR completely breaks selection in high contrast mode.

Before:
image

After:
image

To test it, go in Firefox to about:preferences, look for "Contrast Control", and set it to "Custom".

@kairosci kairosci marked this pull request as draft January 12, 2026 09:25
@kairosci kairosci marked this pull request as ready for review January 12, 2026 09:47
@kairosci
Copy link
Author

kairosci commented Jan 12, 2026 •
edited
Loading

hc

I tested it with HC active on Gnome and I viewed this.
I don't seem to see any overlaps, and it seems to work with high contrast.

no-hc

And this is the fix regression result without HC

@nicolo-ribaudo
Copy link
Contributor

nicolo-ribaudo commented Jan 12, 2026

/botio preview

@moz-tools-bot
Copy link
Collaborator

moz-tools-bot commented Jan 12, 2026

From: Bot.io (Linux m4)

Received

Command cmd_preview from @nicolo-ribaudo received. Current queue size: 0

Live output at: http://54.241.84.105:8877/9c5be3bf74e6c36/output.txt

@moz-tools-bot
Copy link
Collaborator

moz-tools-bot commented Jan 12, 2026

From: Bot.io (Windows)

Received

Command cmd_preview from @nicolo-ribaudo received. Current queue size: 0

Live output at: http://54.193.163.58:8877/deadfac15add5fc/output.txt

@moz-tools-bot
Copy link
Collaborator

moz-tools-bot commented Jan 12, 2026

From: Bot.io (Linux m4)

Success

Full output at http://54.241.84.105:8877/9c5be3bf74e6c36/output.txt

Total script time: 1.01 mins

Published

@moz-tools-bot
Copy link
Collaborator

moz-tools-bot commented Jan 12, 2026

From: Bot.io (Windows)

Success

Full output at http://54.193.163.58:8877/deadfac15add5fc/output.txt

Total script time: 3.31 mins

Published

@calixteman
Copy link
Contributor

calixteman commented Jan 12, 2026 •
edited
Loading

Basically you're reverting a part of what it has been done in:
83c78db
The goal was to make the caret visible so the first thing to do is to check if the care is still visible...

There are several problems with this patch:

  • the caret is barely visible in light mode:
image
  • the floating toolbar is barely visible:
image
  • in HCM, the rendering is broken with Chrome

I don't understand how it's possible to miss the floating toolbar being barely visible... It's the first thing I saw...
Anyway, it's pretty cool to want to help us but (sorry there's a but):

  • we're humans, we need to sleep and a day is ~24h... we don't have that much time at the end
  • reviewing patches, testing them especially ones like this one which require some manual testing in different configurations take some time and sometimes a lot of time.

So I've the feeling you're using a LLM or something like that: I don't have any concern with that but some LLM are just tools here to help us but not to do the job.
So before patching, try to ask questions about the patch you want to partially revert, questions like "What's the caret browsing mode ?", "How to switch to HCM ?", ...

Note that I take the time to write this answer, so try to make a good use of your time and ours ! thank you.

@kairosci kairosci force-pushed the fix-regression-17561 branch 2 times, most recently from 5155dd8 to f68b43a Compare January 13, 2026 18:44
@kairosci kairosci force-pushed the fix-regression-17561 branch from f68b43a to 7a9e8e3 Compare January 13, 2026 18:48
@nicolo-ribaudo
Copy link
Contributor

nicolo-ribaudo commented Jan 14, 2026

Unfortunately in that second screenshot the tooltip on the bottom-right of the highlight is still significantly transparent, while it should be opaque.

@kairosci
Copy link
Author

kairosci commented Jan 14, 2026 •
edited
Loading

Hey, sorry for the mess earlier.

My local Git env was completely acting up, I couldn't get staging to work and ended up having to do a fresh reinstall to fix it. That's why the last push was such a wreck.

My setup is solid now and I’ve double-checked that everything is included. I’ve manually tested the opacity, floating bar, and HCM on Chrome, and it’s all looking good.

Regarding the AI comment, it was really just me rushing with a broken environment, no LLM involved. I’ve spent more time testing this version to make sure it’s right.

Could you give it one last look? Attached are the screenshots

hc-b hc-f no-hc-b no-hc-f

@kairosci kairosci changed the title fix: Fix text-selection boxes visually overlap style: use group opacity for text selection to fix overlapping artifacts Jan 14, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

No reviews

Assignees

No one assigned

Labels

text-selection

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

[Regression] Text-selection boxes visually overlap after PR 17533

5 participants

@kairosci @nicolo-ribaudo @moz-tools-bot @calixteman @timvandermeij