From 934dccf3ab413b9477f1369fca1be8dc51b5db33 Mon Sep 17 00:00:00 2001 From: Alessio Attilio Date: Sat, 10 Jan 2026 16:51:24 +0100 Subject: [PATCH 1/6] style: use group opacity for text selection to fix overlapping artifacts (issue #17561) --- web/text_layer_builder.css | 28 ++++++++++++++++------------ 1 file changed, 16 insertions(+), 12 deletions(-) diff --git a/web/text_layer_builder.css b/web/text_layer_builder.css index 1b8209de44736..05b59b167ec0c 100644 --- a/web/text_layer_builder.css +++ b/web/text_layer_builder.css @@ -18,7 +18,7 @@ text-align: initial; inset: 0; overflow: clip; - opacity: 1; + opacity: 0.25; line-height: 1; text-size-adjust: none; forced-color-adjust: none; @@ -26,6 +26,10 @@ caret-color: CanvasText; z-index: 0; + @media screen and (forced-colors: active) { + opacity: 1; + } + &.highlighting { touch-action: none; } @@ -50,13 +54,13 @@ .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; --rotate: 0deg; - transform: rotate(var(--rotate)) scaleX(var(--scale-x)) - scale(var(--min-font-size-inv)); + transform: rotate(var(--rotate)) scaleX(var(--scale-x)) scale(var(--min-font-size-inv)); } .markedContent { @@ -69,8 +73,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; @@ -78,9 +82,7 @@ --highlight-bg-color: transparent; --highlight-selected-bg-color: transparent; --highlight-backdrop-filter: var(--hcm-highlight-filter); - --highlight-selected-backdrop-filter: var( - --hcm-highlight-selected-filter - ); + --highlight-selected-backdrop-filter: var(--hcm-highlight-selected-filter); } margin: -1px; @@ -114,10 +116,11 @@ ::selection { /* stylelint-disable declaration-block-no-duplicate-properties */ /*#if !MOZCENTRAL*/ - background: rgba(0 0 255 / 0.25); + background: rgba(0 0 255); /*#endif*/ /* stylelint-enable declaration-block-no-duplicate-properties */ - background: color-mix(in srgb, AccentColor, transparent 75%); + background: AccentColor; + color: transparent; } /* Avoids https://github.com/mozilla/pdf.js/issues/13840 in Chrome */ @@ -125,6 +128,7 @@ br::selection { background: transparent; } + /*#endif*/ .endOfContent { @@ -139,4 +143,4 @@ &.selecting .endOfContent { top: 0; } -} +} \ No newline at end of file From 3db6a37c28f1e01e19cc7f1cce8b9c3b3e7d85b1 Mon Sep 17 00:00:00 2001 From: Alessio Attilio Date: Mon, 12 Jan 2026 10:34:49 +0100 Subject: [PATCH 2/6] fix: Restore forced-color-adjust in HCM for text selection --- web/text_layer_builder.css | 1 + 1 file changed, 1 insertion(+) diff --git a/web/text_layer_builder.css b/web/text_layer_builder.css index 05b59b167ec0c..b17ca66fbfef8 100644 --- a/web/text_layer_builder.css +++ b/web/text_layer_builder.css @@ -28,6 +28,7 @@ @media screen and (forced-colors: active) { opacity: 1; + forced-color-adjust: auto; } &.highlighting { From a1f421da822cffa3ddddf32bdd37080b3418d82a Mon Sep 17 00:00:00 2001 From: Alessio Attilio Date: Tue, 13 Jan 2026 18:31:30 +0100 Subject: [PATCH 3/6] fix: Use mix-blend-mode to prevent text selection overlap artifacts --- web/text_layer_builder.css | 26 +++++++++++++++----------- 1 file changed, 15 insertions(+), 11 deletions(-) diff --git a/web/text_layer_builder.css b/web/text_layer_builder.css index b17ca66fbfef8..c04304164b87f 100644 --- a/web/text_layer_builder.css +++ b/web/text_layer_builder.css @@ -18,19 +18,21 @@ text-align: initial; inset: 0; overflow: clip; - opacity: 0.25; + opacity: 1; line-height: 1; text-size-adjust: none; forced-color-adjust: none; transform-origin: 0 0; - caret-color: CanvasText; z-index: 0; + mix-blend-mode: multiply; @media screen and (forced-colors: active) { - opacity: 1; forced-color-adjust: auto; + mix-blend-mode: normal; } + caret-color: CanvasText; + &.highlighting { touch-action: none; } @@ -61,7 +63,8 @@ --scale-x: 1; --rotate: 0deg; - transform: rotate(var(--rotate)) scaleX(var(--scale-x)) scale(var(--min-font-size-inv)); + transform: rotate(var(--rotate)) scaleX(var(--scale-x)) + scale(var(--min-font-size-inv)); } .markedContent { @@ -74,8 +77,8 @@ } .highlight { - --highlight-bg-color: rgb(180 0 170); - --highlight-selected-bg-color: rgb(0 100 0); + --highlight-bg-color: rgb(180 0 170 / 0.25); + --highlight-selected-bg-color: rgb(0 100 0 / 0.25); --highlight-backdrop-filter: none; --highlight-selected-backdrop-filter: none; @@ -83,7 +86,9 @@ --highlight-bg-color: transparent; --highlight-selected-bg-color: transparent; --highlight-backdrop-filter: var(--hcm-highlight-filter); - --highlight-selected-backdrop-filter: var(--hcm-highlight-selected-filter); + --highlight-selected-backdrop-filter: var( + --hcm-highlight-selected-filter + ); } margin: -1px; @@ -117,11 +122,10 @@ ::selection { /* stylelint-disable declaration-block-no-duplicate-properties */ /*#if !MOZCENTRAL*/ - background: rgba(0 0 255); + background: rgba(0 0 255 / 0.25); /*#endif*/ + background: color-mix(in srgb, AccentColor, transparent 75%); /* stylelint-enable declaration-block-no-duplicate-properties */ - background: AccentColor; - color: transparent; } /* Avoids https://github.com/mozilla/pdf.js/issues/13840 in Chrome */ @@ -144,4 +148,4 @@ &.selecting .endOfContent { top: 0; } -} \ No newline at end of file +} From 7a9e8e3df271bd5ea620610b976adbe81653c5b0 Mon Sep 17 00:00:00 2001 From: Alessio Attilio Date: Tue, 13 Jan 2026 19:33:59 +0100 Subject: [PATCH 4/6] fix: Use group opacity approach to fix text selection overlap on Chrome --- web/text_layer_builder.css | 13 ++++++------- 1 file changed, 6 insertions(+), 7 deletions(-) diff --git a/web/text_layer_builder.css b/web/text_layer_builder.css index c04304164b87f..57af4d4f0777c 100644 --- a/web/text_layer_builder.css +++ b/web/text_layer_builder.css @@ -18,17 +18,16 @@ 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; z-index: 0; - mix-blend-mode: multiply; @media screen and (forced-colors: active) { + opacity: 1; forced-color-adjust: auto; - mix-blend-mode: normal; } caret-color: CanvasText; @@ -77,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; @@ -122,9 +121,9 @@ ::selection { /* stylelint-disable declaration-block-no-duplicate-properties */ /*#if !MOZCENTRAL*/ - background: rgba(0 0 255 / 0.25); + background: rgb(0 0 255); /*#endif*/ - background: color-mix(in srgb, AccentColor, transparent 75%); + background: AccentColor; /* stylelint-enable declaration-block-no-duplicate-properties */ } From ea92e164bf28bbb6ced1997648838747bd107b7e Mon Sep 17 00:00:00 2001 From: Alessio Attilio Date: Wed, 14 Jan 2026 13:21:48 +0100 Subject: [PATCH 5/6] fix: Ensure floating toolbar is opaque by moving it to AnnotationEditorLayer --- src/display/editor/tools.js | 14 +++++++++++++- web/annotation_editor_layer_builder.css | 17 ++++++++--------- 2 files changed, 21 insertions(+), 10 deletions(-) diff --git a/src/display/editor/tools.js b/src/display/editor/tools.js index 84d2f23c244e2..866aadc88ddbb 100644 --- a/src/display/editor/tools.js +++ b/src/display/editor/tools.js @@ -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"); } /** @@ -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, diff --git a/web/annotation_editor_layer_builder.css b/web/annotation_editor_layer_builder.css index e7d80a7979578..1fa413c9c5c05 100644 --- a/web/annotation_editor_layer_builder.css +++ b/web/annotation_editor_layer_builder.css @@ -52,6 +52,10 @@ } .textLayer { + @media screen and (forced-colors: active) { + opacity: 1; + } + &.highlighting { cursor: var(--editorFreeHighlight-editing-cursor); @@ -230,14 +234,7 @@ } } -.annotationEditorLayer - :is( - .freeTextEditor, - .inkEditor, - .stampEditor, - .highlightEditor, - .signatureEditor - ), +.annotationEditorLayer, .textLayer { .editToolbar { --editor-toolbar-delete-image: url(images/editor-toolbar-delete.svg); @@ -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; @@ -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; From 46ef223fbf0be591bd4373f8b645674944b550bc Mon Sep 17 00:00:00 2001 From: Alessio Attilio Date: Sun, 18 Jan 2026 21:18:00 +0100 Subject: [PATCH 6/6] chore: reduce text layer opacity from 0.4 to 0.25 --- web/text_layer_builder.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/web/text_layer_builder.css b/web/text_layer_builder.css index 57af4d4f0777c..4fcfbfc557bd4 100644 --- a/web/text_layer_builder.css +++ b/web/text_layer_builder.css @@ -18,7 +18,7 @@ text-align: initial; inset: 0; overflow: clip; - opacity: 0.4; + opacity: 0.25; line-height: 1; text-size-adjust: none; forced-color-adjust: none;