Browser-laptop: Missing pixels at 125% - 175% DPI on Windows (and also blurriness)

[srirambv]

Did you search for similar issues before submitting this one?
Yes

Describe the issue you encountered:
Autofill modal input fields top border missing

Expected behavior:
Input field should retain border when not selected

• Platform (Win7, 8, 10? macOS? Linux distro?):
  Windows 10 x64

• Brave Version (revision SHA):

Brave: 0.13.0 
rev: 0c7a64d6917b6e7e72d074b05e1d7488466418a9 
Muon: 2.0.8 
libchromiumcontent: 54.0.2840.100 
V8: 5.4.500.41 
Node.js: 7.0.0 
Update Channel: dev 
os.platform: win32 
os.release: 10.0.14393 
os.arch: x64

• Steps to reproduce:

  1. Do a clean install of 0.13.0 Preivew 7
  2. Open about:autofill, click on new address
  3. See the difference

• Screenshot if needed:
  

• Any related issues:

Test plan

https://github.com/brave/browser-laptop/pull/6947#issue-204375502

[bbondy]

@cezaraugusto could you fix this, and if so put it in .13? Thanks

[bsclifton]

This is a weird one... besides the borders being off (which we can fix), the fields are blurry when the blur happens

In the above shot, notice when he clicks outside the boxes to get rid of focus intentionally. Some of the field names move vertically and then the whole thing becomes slightly blurry

here's another demo which might show it more clearly:

[srirambv]

Its not just the Autofill modal but the search history input also doesn't have left border

[bbondy]

moved this into 0.13

[bsclifton]

Possible issue details captured here https://bugs.chromium.org/p/chromium/issues/detail?id=395425
I have a fix, working on incorporating it now...

[srirambv]

Input field highlight is not correct.

[bsclifton]

OK it appears this issue is NOT caused by https://github.com/brave/browser-laptop/issues/6258, since it happens when not maximized.

The possible fix I had mentioned above does work (fix being pass Brave.exe two extra params; --high-dpi-support=1 --force-device-scale-factor=1)... but it works by forcing the Brave window to render at 100% DPI. It's important to note that this fix does NOT work at 200% (and also, the window is so small it's unreadable).

The magnification is expected- Chrome 54 introduced that (in 53 and prior, 125% or less DPI were hardcoded to 100%, avoiding this issue completely for those resolutions).

It appears there is a larger issue with DPI which causes this to happen which needs to be investigated.

[bsclifton]

Unfortunately, this was not fixed with https://github.com/brave/muon/commit/30fd6ff5ac772cb645b0d4be78fae49d84fbbb19 (although it does look better).

The issue seen above in the GIF I captured still happens

[bsclifton]

It seems that this only looks correct when at either 100% or 200% :frowning_face:

[srirambv]

The input field border issue is not just on browser element its also same on webpages. Below is the screen grab on autofill how the input fields look before and after autofill.

@bsclifton as per slack conversation you mentioned the magnification is how it should work in CR54 build. Can the parameters --high-dpi-support=1 --force-device-scale-factor=1 be hardcoded for resolutions higher than 100% DPI, for 0.13.0 release, solving both magnification and the input fields issue?

[bsclifton]

@srirambv no, we can't hardcode those params unfortunately. @jonathansampson tried them and Brave was unusable because it stayed at the 100% resolution size on his 200% DPI monitor. We need to respect the OS DPI settings

[bsclifton]

May be the same issue as discussed with https://github.com/brave/browser-laptop/issues/6698#issuecomment-273333453

[bsclifton]

This is a fairly complex problem and will take some time to solve. Although high DPI Windows users may have some ugliness, Brave is still very usable; I don't believe this should be a blocker for 0.13.0. I'm going to move this to 0.13.1 :smile:

[bsclifton]

I don't believe the root cause for this issue is the same as https://github.com/brave/browser-laptop/issues/6698, which appears to only affect the size of the rendering area.

The problem seen here appears to be that the content is scaled improperly

[bsclifton]

I have found the root cause for this issue! cc: @bbondy, @bridiver, @darkdh

The missing pixels and blurriness are happening because we set the command line flag enable-use-zoom-for-dsf to false. If you remove this line, it works great!

Before we enable this (as the comment shows in the code), it's important to understand that adding this fixed the following issues (on Chromium 53):

• #4517 - Unable to select text on a page opened in a new tab following a link
• #4518 - Link hover indicators flicker when moving the cursor across links on tabs opened from links
• #4472 - Mouse scrolling wheel issues

We need to make sure removing this code does not cause these closed issues to reappear! At first glance, I didn't see any issues but we'll want to do more testing of course.

I believe that fixing this issue should also fix the following issues:

6777 - Bookmark hanger items are not properly aligned & text looks blurry

6144 - Rendering with ClearType

3556 - Text is blurry in page content, tab labels, and URL bar

2089 - Question: Can you keep the ability of good font rendering?

[srirambv]

Looks good on 0.13.1 RC2. Also font looks crisp