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

Open
kairosci wants to merge 5 commits into
base: master
Choose a base branch
from
+36 −17
Open

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

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
934dccf
style: use group opacity for text selection to fix overlapping artifa…
kairosci Jan 10, 2026
3db6a37
fix: Restore forced-color-adjust in HCM for text selection
kairosci Jan 12, 2026
a1f421d
fix: Use mix-blend-mode to prevent text selection overlap artifacts
kairosci Jan 13, 2026
7a9e8e3
fix: Use group opacity approach to fix text selection overlap on Chrome
kairosci Jan 13, 2026
ea92e16
fix: Ensure floating toolbar is opaque by moving it to AnnotationEdit…
kairosci Jan 14, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
14 changes: 13 additions & 1 deletion src/display/editor/tools.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1371,8 +1371,12 @@ class AnnotationEditorUIManager {
if (!boxes) {
return;
}
const layer = this.#getLayerForTextLayer(textLayer);
if (layer) {
layer.div.hidden = false;
}
this.#floatingToolbar ||= new FloatingToolbar(this);
this.#floatingToolbar.show(textLayer, boxes, this.direction === "ltr");
this.#floatingToolbar.show(layer?.div || textLayer, boxes, this.direction === "ltr");
}

/**
Expand Down Expand Up @@ -1427,6 +1431,14 @@ class AnnotationEditorUIManager {
if (!selection || selection.isCollapsed) {
if (this.#selectedTextNode) {
this.#floatingToolbar?.hide();
const anchorElement = this.#getAnchorElementForSelection(selection);
const textLayer = anchorElement?.closest(".textLayer");
if (textLayer) {
const layer = this.#getLayerForTextLayer(textLayer);
if (layer?.isEmpty && this.#mode === AnnotationEditorType.NONE) {
layer.div.hidden = true;
}
}
this.#selectedTextNode = null;
this.#dispatchUpdateStates({
hasSelectedText: false,
Expand Down
17 changes: 8 additions & 9 deletions web/annotation_editor_layer_builder.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -52,6 +52,10 @@
}

.textLayer {
@media screen and (forced-colors: active) {
opacity: 1;
}

&.highlighting {
cursor: var(--editorFreeHighlight-editing-cursor);

Expand Down Expand Up @@ -230,14 +234,7 @@
}
}

.annotationEditorLayer
:is(
.freeTextEditor,
.inkEditor,
.stampEditor,
.highlightEditor,
.signatureEditor
),
.annotationEditorLayer,
.textLayer {
.editToolbar {
--editor-toolbar-delete-image: url(images/editor-toolbar-delete.svg);
Expand Down Expand Up @@ -273,6 +270,7 @@
--alt-text-warning-color: var(--editor-toolbar-fg-color);
--alt-text-hover-done-color: var(--editor-toolbar-hover-fg-color);
--alt-text-hover-warning-color: var(--editor-toolbar-hover-fg-color);
opacity: 1;
}

display: flex;
Expand All @@ -282,8 +280,9 @@
justify-content: center;
align-items: center;
cursor: default;
pointer-events: auto;
pointer-events: auto !important;
box-sizing: content-box;
z-index: 100001;
padding: var(--editor-toolbar-padding);

position: absolute;
Expand Down
22 changes: 15 additions & 7 deletions web/text_layer_builder.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,14 +18,20 @@
text-align: initial;
inset: 0;
overflow: clip;
opacity: 1;
opacity: 0.4;
line-height: 1;
text-size-adjust: none;
forced-color-adjust: none;
transform-origin: 0 0;
caret-color: CanvasText;
z-index: 0;

@media screen and (forced-colors: active) {
opacity: 1;
forced-color-adjust: auto;
}

caret-color: CanvasText;

&.highlighting {
touch-action: none;
}
Expand All @@ -50,7 +56,8 @@
.markedContent span:not(.markedContent) {
z-index: 1;

--font-height: 0; /* set by text_layer.js */
--font-height: 0;
/* set by text_layer.js */
font-size: calc(var(--text-scale-factor) * var(--font-height));

--scale-x: 1;
Expand All @@ -69,8 +76,8 @@
}

.highlight {
--highlight-bg-color: rgb(180 0 170 / 0.25);
--highlight-selected-bg-color: rgb(0 100 0 / 0.25);
--highlight-bg-color: rgb(180 0 170);
--highlight-selected-bg-color: rgb(0 100 0);
--highlight-backdrop-filter: none;
--highlight-selected-backdrop-filter: none;

Expand Down Expand Up @@ -114,17 +121,18 @@
::selection {
/* stylelint-disable declaration-block-no-duplicate-properties */
/*#if !MOZCENTRAL*/
background: rgba(0 0 255 / 0.25);
background: rgb(0 0 255);
/*#endif*/
background: AccentColor;
/* stylelint-enable declaration-block-no-duplicate-properties */
background: color-mix(in srgb, AccentColor, transparent 75%);
}

/* Avoids https://github.com/mozilla/pdf.js/issues/13840 in Chrome */
/*#if !MOZCENTRAL*/
br::selection {
background: transparent;
}

/*#endif*/

.endOfContent {
Expand Down