WebKit Bugzilla
New
Browse
Log In
×
Sign in with GitHub
or
Remember my login
Create Account
·
Forgot Password
Forgotten password account recovery
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
https://twitter.com/fvsch/status/1318683422555017219
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
Details
Formatted Diff
Diff
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
Details
Formatted Diff
Diff
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
Details
[Image] clipping issue after Patch is applied
(6.39 KB, image/png)
2020-11-05 11:11 PST
,
Devin Rousso
no flags
Details
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
Details
Formatted Diff
Diff
Fix blurry Inspect Icon on non-retina (1x) screen
(1.43 KB, patch)
2020-11-11 22:34 PST
,
Federico Bucchi
fbucchi
: review?
Details
Formatted Diff
Diff
Screenshots of bug resolution
(2.82 KB, image/png)
2020-11-11 22:36 PST
,
Federico Bucchi
no flags
Details
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
Details
Show Obsolete
(3)
View All
Add attachment
proposed patch, testcase, etc.
Radar WebKit Bug Importer
Comment 1
2020-10-27 16:39:17 PDT
<
rdar://problem/70744157
>
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.
Top of Page
Format For Printing
XML
Clone This Bug