NEW 218003
Web Inspector: Inspect element icon looks blurry on non-retina (1x) screen
https://bugs.webkit.org/show_bug.cgi?id=218003
Summary Web Inspector: Inspect element icon looks blurry on non-retina (1x) screen
Nikita Vasilyev
Reported 2020-10-20 16:38:14 PDT
Attachments
Web Inspector: Fix Crosshair svg blurry for 1x non-retina screens (1.97 KB, patch)
2020-11-04 16:53 PST, Federico Bucchi
no flags
Web Inspector: Fix Crosshair svg blurry for 1x non-retina screens (1.98 KB, patch)
2020-11-04 22:52 PST, Federico Bucchi
no flags
3 screens for comparison: 1x with current issue, 1x with fix and retina with no issue (6.35 KB, image/png)
2020-11-04 23:10 PST, Federico Bucchi
no flags
[Image] clipping issue after Patch is applied (6.39 KB, image/png)
2020-11-05 11:11 PST, Devin Rousso
no flags
Web Inspector: Fix Crosshair svg blurry for 1x non-retina screens (2.16 KB, patch)
2020-11-05 21:39 PST, Federico Bucchi
no flags
Fix blurry Inspect Icon on non-retina (1x) screen (1.43 KB, patch)
2020-11-11 22:34 PST, Federico Bucchi
fbucchi: review?
Screenshots of bug resolution (2.82 KB, image/png)
2020-11-11 22:36 PST, Federico Bucchi
no flags
Screenshot of confirmation that nothing changed for retina displays after change for 1x (5.91 KB, image/png)
2020-11-11 22:37 PST, Federico Bucchi
no flags
Radar WebKit Bug Importer
Comment 1 2020-10-27 16:39:17 PDT
Federico Bucchi
Comment 2 2020-11-04 16:53:43 PST
Created attachment 413226 [details] Web Inspector: Fix Crosshair svg blurry for 1x non-retina screens
Devin Rousso
Comment 3 2020-11-04 17:44:40 PST
Comment on attachment 413226 [details] Web Inspector: Fix Crosshair svg blurry for 1x non-retina screens View in context: https://bugs.webkit.org/attachment.cgi?id=413226&action=review > Source/WebInspectorUI/UserInterface/Images/Crosshair.svg:4 > + <g transform="translate(0.5 0.5)"> We try to avoid using `<g>` and `transform` wherever possible to keep things flat and clean. This is how we do it for all other glyphs. Rather than have a `translate` here, please add `0.5` to the necessary coordinates within this.
Devin Rousso
Comment 4 2020-11-04 17:48:06 PST
Also, can you upload screenshots comparing before and after? I want to make sure this doesn't negatively affect retina displays.
Federico Bucchi
Comment 5 2020-11-04 22:52:51 PST
Created attachment 413252 [details] Web Inspector: Fix Crosshair svg blurry for 1x non-retina screens
Federico Bucchi
Comment 6 2020-11-04 23:10:03 PST
Created attachment 413253 [details] 3 screens for comparison: 1x with current issue, 1x with fix and retina with no issue
Devin Rousso
Comment 7 2020-11-05 11:11:29 PST
Created attachment 413327 [details] [Image] clipping issue after Patch is applied
Devin Rousso
Comment 8 2020-11-05 11:11:45 PST
Comment on attachment 413252 [details] Web Inspector: Fix Crosshair svg blurry for 1x non-retina screens r-, I tried applying this myself and adding the 0.5 causes the icon to shift on my retina display and partially clip on the right and bottom (see attachment 413327 [details])
Federico Bucchi
Comment 9 2020-11-05 21:39:43 PST
Created attachment 413401 [details] Web Inspector: Fix Crosshair svg blurry for 1x non-retina screens
Devin Rousso
Comment 10 2020-11-10 12:06:17 PST
Comment on attachment 413401 [details] Web Inspector: Fix Crosshair svg blurry for 1x non-retina screens r- as this still has the same clipping issue Perhaps try moving the `@media (-webkit-min-device-pixel-ratio: 2)` to `Main.css` with something like ``` @media (-webkit-max-device-pixel-ratio: 1) { .tab-bar .navigation-bar .item.inspect { // something goes here } } ```
Federico Bucchi
Comment 11 2020-11-11 22:34:19 PST
Created attachment 413911 [details] Fix blurry Inspect Icon on non-retina (1x) screen
Federico Bucchi
Comment 12 2020-11-11 22:36:57 PST
Created attachment 413912 [details] Screenshots of bug resolution
Federico Bucchi
Comment 13 2020-11-11 22:37:46 PST
Created attachment 413913 [details] Screenshot of confirmation that nothing changed for retina displays after change for 1x
Note You need to log in before you can comment on or make changes to this bug.