Custom Fonts (5.4.7) - Family & Size settings do not affect hidden view used for text cursor/selection

[dbarbuzzi]

• Browser: Chrome 123.0.6312.59, Firefox 124.0.1
• Operating System: Windows 11
• Link to page with the issue: https://github.com/vllm-project/vllm/blob/main/examples/offline_inference.py
• Screenshot:

This seems to be a reoccurrence of #1354 presumably related to changes on GitHub’s end. In the screenshot provided, notice that the highlighted selection only covers the lines partially, however, this selection includes the full lines.

Digging around with Inspect Element, while #read-only-cursor-text-area is still a valid selector for this element on such a page, it seems that the custom styles are being overwritten:

• a rule for the selector .react-blob-print-hide overrides the custom font-family value
• an in-line/element.style rule is overriding the custom font-size value

This appears to be resolved locally when adding .react-blob-print-hide to the list of selectors in the stylesheet:

diff --git a/github-custom-fonts.user.css b/github-custom-fonts.user.css
index 0960889f..399d9e1a 100644
--- a/github-custom-fonts.user.css
+++ b/github-custom-fonts.user.css
@@ -15,7 +15,7 @@
 @-moz-document regexp("^https?://((education|gist|graphql|guides|raw|resources|status|developer|support|vscode-auth)\\.)?github\\.com/((?!generated_pages/preview).)*$"), regexp("^https?://www\.zuora\.com.*github\.com.*"), domain("githubusercontent.com"), domain("www.githubstatus.com"), domain("stylishthemes.github.io") {
   pre, code, tt, kbd:not(.badmono), samp, .blob-code, .file-data pre, .line-data,
   #gist-form .file .input textarea, .blob-code-inner, .react-code-text, .jujkut,
-  #read-only-cursor-text-area {
+  #read-only-cursor-text-area, .react-blob-print-hide {
-     font-family: var(--ghd-font-family), Consolas, "Liberation Mono", Menlo, Courier, monospace;
+     font-family: var(--ghd-font-family), Consolas, "Liberation Mono", Menlo, Courier, monospace !important;
     font-feature-settings: var(--ghd-font-feature-settings);
     font-variant-ligatures: var(--ghd-font-variant-ligatures);
-    font-size: var(--ghd-font-size);
+    font-size: var(--ghd-font-size) !important;

Edit: Include the required addition of !important to the font-family and font-size values.

[ian-h-chamberlain]

Thank you for digging in! This was driving me crazy and I couldn't figure out what selectors I needed to make it work properly, but with your changes my selections look seamless + natural again. 🙏 much appreciated

[silverwind]

On a sidenote, I don't think I will maintain this usercss anymore, so if you guys want to fork it, feel free to and I will link to that and remove it from this repo.

[ian-h-chamberlain]

I've made a Gist to fork it here: https://gist.github.com/ian-h-chamberlain/3e3a862f0b95e2429839231080fde7bd

If you would like to link it, go ahead — I will probably try to maintain that just for myself but if it helps others too then great!