From 9f62a88c387214e38ed19d8f58d6dc41ef7a36f4 Mon Sep 17 00:00:00 2001 From: Jonas Jenwald Date: Sun, 2 Feb 2025 10:24:26 +0100 Subject: [PATCH] Remove the `color-mix` fallback used with PopupAnnotations This CSS feature is now available in *most* browsers that we support, with old Chromium-based browsers being the only exception; please see https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/color-mix#browser_compatibility From this data we see that the feature in question has been supported since Chrome 111, which was released on 2023-03-01 (i.e. almost two years ago). Please note that we've never guaranteed that all features and functionality will be available in the oldest supported browsers. Furthermore, even with the `color-mix` fallback removed PopupAnnotations will still function just as before but may render with the default color (defined in the CSS-file) rather than the one specified in the PDF document. --- src/display/annotation_layer.js | 18 +----------------- 1 file changed, 1 insertion(+), 17 deletions(-) diff --git a/src/display/annotation_layer.js b/src/display/annotation_layer.js index 7e023c67d..80b083c61 100644 --- a/src/display/annotation_layer.js +++ b/src/display/annotation_layer.js @@ -2199,23 +2199,7 @@ class PopupElement { const baseColor = (popup.style.outlineColor = Util.makeHexColor( ...this.#color )); - if ( - (typeof PDFJSDev !== "undefined" && PDFJSDev.test("MOZCENTRAL")) || - CSS.supports("background-color", "color-mix(in srgb, red 30%, white)") - ) { - popup.style.backgroundColor = `color-mix(in srgb, ${baseColor} 30%, white)`; - } else { - // color-mix isn't supported in some browsers hence this version. - // See https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/color-mix#browser_compatibility - // TODO: Use color-mix when it's supported everywhere. - // Enlighten the color. - const BACKGROUND_ENLIGHT = 0.7; - popup.style.backgroundColor = Util.makeHexColor( - ...this.#color.map(c => - Math.floor(BACKGROUND_ENLIGHT * (255 - c) + c) - ) - ); - } + popup.style.backgroundColor = `color-mix(in srgb, ${baseColor} 30%, white)`; } const header = document.createElement("span");