Make WordPress Core

Opened 6 months ago

Last modified 5 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 6 months ago.
Demonstration of improper HiDPI scaling.
2023-04-18_21-12-12.png (37.7 KB) - added by oglekler 5 months ago.
Google Chrome v111, zoom 110%

Download all attachments as: .zip

Change History (7)

@stuartsweet
6 months ago

Demonstration of improper HiDPI scaling.

#1 @sabernhardt
6 months ago

  • Component changed from Menus to Editor

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


6 months ago

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


5 months ago

#4 @ironprogrammer
5 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
5 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
5 months ago

Google Chrome v111, zoom 110%

Note: See TracTickets for help on using tickets.