Bug 148150 – Web Inspector: transparent color swatches have lopsided checkered background on non-retina

• Status: RESOLVED
• Resolution: FIXED
• Component: Web Inspector

[Joseph Pecoraro]

* 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

[Radar WebKit Bug Importer]

<rdar://problem/22334640>

[Joseph Pecoraro]

Created attachment 259309 [details]
[IMAGE] Before

[Joseph Pecoraro]

Created attachment 259310 [details]
[IMAGE] After

[Joseph Pecoraro]

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.

[Timothy Hatcher]

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?

[Joseph Pecoraro]

(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.

[Joseph Pecoraro]

Created attachment 259324 [details]
[PATCH] Proposed Fix

[WebKit Commit Bot]

Comment on attachment 259324 [details]
[PATCH] Proposed Fix

Clearing flags on attachment: 259324

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