Bug 148150 - Web Inspector: transparent color swatches have lopsided checkered background on non-retina
Summary: Web Inspector: transparent color swatches have lopsided checkered background ...
Status: RESOLVED FIXED
Alias: None
Product: WebKit
Classification: Unclassified
Component: Web Inspector (show other bugs)
Version: WebKit Nightly Build
Hardware: All All
: P2 Normal
Assignee: Joseph Pecoraro
URL:
Keywords: InRadar
Depends on:
Blocks:
 
Reported: 2015-08-18 16:16 PDT by Joseph Pecoraro
Modified: 2015-10-31 09:04 PDT (History)
8 users (show)

See Also:


Attachments
[IMAGE] Before (5.28 KB, image/png)
2015-08-18 16:18 PDT, Joseph Pecoraro
no flags Details
[IMAGE] After (5.42 KB, image/png)
2015-08-18 16:18 PDT, Joseph Pecoraro
no flags Details
[PATCH] Proposed Fix (1.70 KB, patch)
2015-08-18 16:19 PDT, Joseph Pecoraro
timothy: review+
Details | Formatted Diff | Diff
[PATCH] Proposed Fix (2.21 KB, patch)
2015-08-18 17:02 PDT, Joseph Pecoraro
no flags Details | Formatted Diff | Diff

Note You need to log in before you can comment on or make changes to this bug.
Description Joseph Pecoraro 2015-08-18 16:16:32 PDT
* SUMMARY
"transparent" color swatches have lopsided checkered background on non-retina.

* TEST
data:text/html,<div%20style="color:transparent">Test</div>

* STEPS TO REPRODUCE
1. Inspect <div> on test
2. View Styles > Rules
  => Color swatch for Transparent shows lopsided checkers
Comment 1 Radar WebKit Bug Importer 2015-08-18 16:17:40 PDT
<rdar://problem/22334640>
Comment 2 Joseph Pecoraro 2015-08-18 16:18:11 PDT
Created attachment 259309 [details]
[IMAGE] Before
Comment 3 Joseph Pecoraro 2015-08-18 16:18:25 PDT
Created attachment 259310 [details]
[IMAGE] After
Comment 4 Joseph Pecoraro 2015-08-18 16:19:09 PDT
Created attachment 259311 [details]
[PATCH] Proposed Fix

Note, no change for Retina (2x) devices, since they can do the half pixel checkered background necessary for 11x11 box.
Comment 5 Timothy Hatcher 2015-08-18 16:48:45 PDT
Comment on attachment 259311 [details]
[PATCH] Proposed Fix

The cubic-bezier might need tweaked too. It matches the size of this. Why not 10px for all devices?
Comment 6 Joseph Pecoraro 2015-08-18 16:51:32 PDT
(In reply to comment #5)
> Comment on attachment 259311 [details]
> [PATCH] Proposed Fix
> 
> The cubic-bezier might need tweaked too. It matches the size of this. Why
> not 10px for all devices?

10px is kinda small, 11px is great, 12px is too large compared to the text. So I'm preferring 11px (which is actually measured as 1em in the default case) for Retina.
Comment 7 Joseph Pecoraro 2015-08-18 17:02:52 PDT
Created attachment 259324 [details]
[PATCH] Proposed Fix
Comment 8 WebKit Commit Bot 2015-08-18 17:57:05 PDT
Comment on attachment 259324 [details]
[PATCH] Proposed Fix

Clearing flags on attachment: 259324

Committed r188614: <http://trac.webkit.org/changeset/188614>