Make WordPress Core

Opened 11 months ago

Last modified 10 months ago

#58085 new defect (bug)

Some dialogs are blurry on HiDPI devices

Reported by: stuartsweet's profile stuartsweet Owned by:
Milestone: Awaiting Review Priority: normal
Severity: normal Version: 6.2
Component: Editor Keywords: has-screenshots has-testing-info
Focuses: Cc:

Description

Some dialogs are scaling text instead of using hiDPI properly. The publish calendar and the link attachment dialog are blurry when they should not be.

See attached file and note the difference between the two words marked "Publish"

Attachments (2)

Screenshot 2023-04-04 094840.png (23.6 KB) - added by stuartsweet 11 months ago.
Demonstration of improper HiDPI scaling.
2023-04-18_21-12-12.png (37.7 KB) - added by oglekler 10 months ago.
Google Chrome v111, zoom 110%

Download all attachments as: .zip

Change History (7)

@stuartsweet
11 months ago

Demonstration of improper HiDPI scaling.

#1 @sabernhardt
11 months ago

  • Component changed from Menus to Editor

This ticket was mentioned in Slack in #accessibility by joedolson. View the logs.


11 months ago

This ticket was mentioned in Slack in #core-test by ironprogrammer. View the logs.


10 months ago

#4 @ironprogrammer
10 months ago

  • Focuses accessibility template removed
  • Keywords has-screenshots has-testing-info added

Welcome to Trac, @stuartsweet, and thank you for the report!

As noted during the previous `#accessibility` scrub, this should ideally be reported upstream in Gutenberg, where it can more readily be addressed. It was also noted that this isn't an a11y concern per se, so I've removed that focus for now.

Once reported in Gutenberg, this ticket can be closed with reported-upstream.

#5 @oglekler
10 months ago

Reproduction Report

I was also able to reproduce this even if I don't have hiDPI monitor by changing zoom. Depending on the zoom and current calculated position of the modal, it can vary. Especially blurry: zoom 110%, 150%

Environment

Hardware: Asus ROG G750JS
OS: Windows NT 10.0 AMD64
Display: 1920x1980
Server: nginx/1.16.0
PHP: 7.4.3
WordPress: 6.2
Theme: twentytwentytwo
Plugins: no active plugins

Actual results

✅ Google Chrome 111
❌ Firefox 111 (here zoomed modal menus look fine)
✅ Microsoft Edge 112
✅ Avast Secure Browser 112

Notes

It looks like this is issue with rendering abilities of the browser layout engine and caused by transform -> translate style params.
And triple scrollbar looks… overwhelming.

@oglekler
10 months ago

Google Chrome v111, zoom 110%

Note: See TracTickets for help on using tickets.