| Summary: | Web Inspector: Inspect element icon looks blurry on non-retina (1x) screen | ||
|---|---|---|---|
| Product: | WebKit | Reporter: | Nikita Vasilyev <nvasilyev> |
| Component: | Web Inspector | Assignee: | Radar WebKit Bug Importer <webkit-bug-importer> |
| Status: | NEW --- | ||
| Severity: | Normal | CC: | ews-watchlist, fbucchi, hi, inspector-bugzilla-changes, webkit-bug-importer |
| Priority: | P2 | Keywords: | GoodFirstBug, InRadar |
| Version: | WebKit Nightly Build | ||
| Hardware: | All | ||
| OS: | All | ||
| Attachments: | |||
|
Description
Nikita Vasilyev
2020-10-20 16:38:14 PDT
Created attachment 413226 [details]
Web Inspector: Fix Crosshair svg blurry for 1x non-retina screens
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. Also, can you upload screenshots comparing before and after? I want to make sure this doesn't negatively affect retina displays. Created attachment 413252 [details]
Web Inspector: Fix Crosshair svg blurry for 1x non-retina screens
Created attachment 413253 [details]
3 screens for comparison: 1x with current issue, 1x with fix and retina with no issue
Created attachment 413327 [details]
[Image] clipping issue after Patch is applied
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]) Created attachment 413401 [details]
Web Inspector: Fix Crosshair svg blurry for 1x non-retina screens
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
}
}
```
Created attachment 413911 [details]
Fix blurry Inspect Icon on non-retina (1x) screen
Created attachment 413912 [details]
Screenshots of bug resolution
Created attachment 413913 [details]
Screenshot of confirmation that nothing changed for retina displays after change for 1x
|