Text editing boxes have mouse location issues in higher DPIs

[trlkly]

Prerequisites

• I verified that this is not a filter issue (MUST be reported at filter issue tracker)
• This is not a support issue or a question
• I performed a cursory search of the issue tracker to avoid opening a duplicate issue
• The issue is not present after wholly disabling uBlock Origin ("uBO") in the browser
• I checked the documentation to understand that the issue I report is not a normal behavior

I tried to reproduce the issue when...

• uBO is the only extension
• uBO with default lists/settings
• using a new, unmodified browser profile

Description

For quite a while now, the text editor in UBO's settings (e.g. for filters, rules, or trusted sites) has had mouse issues. It seems that the place it thinks I'm clicking is always down and to the right to where I'm actually clicking.

For example, if I click just before the first character in the first row, the cursor moves to the third character in the third row. The further down I go, the more off the cursor gets. This suggests to me that there is some DPI adjustment not taking place.

A specific URL where the issue occurs

chrome-extension://cjpalhdlnbpafiamejdnhcphjbkeiagm/dashboard.html#1p-filters.html

Steps to Reproduce

1. Start Chrome with setting chrome.exe --force-device-scale-factor=1.25 (or possibly actually adjust DPI in Windows)
2. Install uBlockOrigin
3. Start adding custom filters
4. Try to move the text cursor with the mouse.

Expected behavior

Like with all textboxes on Chrome, wherever you click the mouse will move the text cursor to that location, assuming there is text there.

(For a similar editor text box, see Tampermonkey. It looks similar enough that I suspect it is based on the same codebase.)

Actual behavior

Cursor location is off by increasing amounts.

uBlock Origin version

1.38.6

Browser name and version

Chrome 95.0.4638.69 (64-bit)

Operating System and version

Windows 10 (64-bit) version 21H1 (build 19043.1237)

[gwarser]

I cannot reproduce on Manjaro with --force-device-scale-factor=1.25.

Version 95.0.4638.69 (Official Build) (64-bit), uBO 1.38.6

---

No issue on Edge 95.0.1020.30 in Win10 20H2 uBO 1.38.4 VM 125% scaling.

[gorhill]

Unable to reproduce on my side when launching Chromium (linux) using:

chromium --force-device-scale-factor=1.25

Given that so far nobody else can reproduce, please investigate more on your side to find out what else may be interfering. uBO uses CodeMirror to edit filters, so maybe see if you can reproduce outside uBO where CodeMirror is used, for example the demos.

[trlkly]

One possibility is that Windows itself uses a 115% DPI scale factor, and has fonts set at 125%. (That is actually the reason I use the custom scale factor in Chrome).

…

On Wed, Nov 3, 2021 at 5:18 PM Raymond Hill ***@***.***> wrote: Unable to reproduce on my side when launching Chromium (linux) using: chromium --force-device-scale-factor=1.25 Given that so far nobody else can reproduce, please investigate more on your side to find out what else may be interfering. uBO uses CodeMirror to edit filters, so maybe see if you can reproduce outside uBO where CodeMirror is used, for example the demos <https://codemirror.net/>. — You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub <#1793 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/ABJVFLUKJT5KHRNXJX3NATDUKE74JANCNFSM5HIP44MQ> . Triage notifications on the go with GitHub Mobile for iOS <https://apps.apple.com/app/apple-store/id1477376905?ct=notification-email&mt=8&pt=524675> or Android <https://play.google.com/store/apps/details?id=com.github.android&referrer=utm_campaign%3Dnotification-email%26utm_medium%3Demail%26utm_source%3Dgithub>.

[gorhill]

If Chrome is fooled by your system settings, then you need to report to Chromium devs.

[trlkly]

You seem to have misunderstood. Chrome works exactly as intended on Windows 10. The system settings I referred to work exactly as intended. It works exactly the same way in Edge. There is no bug for me to report. (or, to be more accurate, I have reported it, and they told me it was intended behavior.)

I choose to customize my browser because I don't like the intended behavior. And that also works just fine. All websites load fine. All my extensions, save yours, work fine. Everything works as intended except uBlock Origin, which means that something in your code is triggering the bug.

Your extension is the only one that misbehaves. As I already mentioned, TamperMonkey has the same type of text editor, and it works just fine. So clearly something in your code is triggering the problem.

Yes, maybe your code is fine, and Chromium is bugged. But I can't know that unless we track down what part of your extension code is causing the problem.

I can't report a problem to Chrome if I don't have a minimal sample of the code that triggers the bug. And you can't know for sure if it's a Chrome bug or an extension bug if you don't isolate the code that triggers the bug.

[gorhill]

I asked you above:

see if you can reproduce outside uBO where CodeMirror is used, for example the demos.

You didn't answer. When people skips my questions which purpose is to narrow down the possible cause, I consider the case is going nowhere, and in such case the issue is closed.

[gwarser]

One possibility is that Windows itself uses a 115% DPI scale factor, and has fonts set at 125%.

How to set this?

[gwarser]

Maybe this has similar cause: https://www.reddit.com/r/uBlockOrigin/comments/qshpni/cursor_selection_off/

[trlkly]

@gwarser:

DPI settings: Settings > System > Display > Advanced Scaling Settings > Custom Scaling > set to 115
Font size settings: Settings > Ease Of Access > Make Text Bigger > set slider to 125%

@gorhill: I am not sure what you are asking me to do. If you want me to check out a website, please provide a URL.

[smythp]

Hi, I'm the person who posted on Reddit with the Linux setup.

I used larger system font as an accessibility setting as well. When I turn it off, the bug is no longer present. For now, I'm going to turn off the larger font, because I have other forms of Zoom and because most apps don't seem to respect it anyway, so this thread did help me to fix my issue.

[gwarser]

DPI settings: ...
Font size settings:

All works fine, but I tested in VM, 1600x900 resolution. Latest stable Firefox, Edge and Chrome.

I am not sure what you are asking me to do. If you want me to check out a website, please provide a URL.

->

...for example the demos.

[trlkly]

DPI settings: ...
Font size settings:

All works fine, but I tested in VM, 1600x900 resolution. Latest stable Firefox, Edge and Chrome.

Perhaps try my resolution, which is 1366x768.

...for example the demos.

The fancy textbox on those pages works just fine. However, I note that the text on them is smaller.

---

If it helps, here is a screenshot of how the filters tab appears in Chrome for me:

[gwarser]

If it helps, here is a screenshot of how the filters tab appears in Chrome for me:

Fonts in menu on top look tiny - I don't see this on my side.

[gwarser]

I can reproduce in 1366x768.

Does not affect codemirror.net, can be because of iframe in uBO. Also happens in advanced settings editor which does not use iframe.

---

Does not affect Firefox, but there fonts are not zoomed so much.

---

codemirror/codemirror5#2443 ?

[gorhill]

I can reproduce on my OS without any change to the OS, but cranking up the factor to 2.25, i.e.:

chromium --force-device-scale-factor=2.25

With previous tries using 1.50, 1.75, I couldn't reproduce.

[gorhill]

Looks like the cause is in dashboard-common.css:

@media screen and (max-device-width: 960px) {
    body {
        zoom: 1.4;
        }
    }

---

This was added almost 5 years ago, I can't remember why. Firefox does not support CSS zoom, hence it's not affected. Given that the setting has no effect in Firefox for Android, I will just remove it.

[gorhill]

Removing this will cause the font to be smaller then before for when the --force-device-scale-factor caused the apparent device width to be 960px or less, so you will have to adjust your custom settings for this.