Automattic / antiscroll

OS X Lion style cross-browser native scrolling on the web that gets out of the way.
1.07k stars 162 forks source link

Hard to see scrollbar when using darker background color. #18

Closed nulltask closed 12 years ago

nulltask commented 12 years ago

Example: http://cl.ly/0R3J1E3B3p3z033N1j3q Completely disappeared on #000 background.

Improved: http://cl.ly/0N0q3f3v1y3b2C103r0j I added iOS style border by box-shadow. (legacy IE is unsupported.)

rauchg commented 12 years ago

Genius. Thanks

tj commented 12 years ago

nice! why box-shadow here though? wouldn't border be fine?

iammerrick commented 12 years ago

I would think border would work but you would need to leverage rgba to get the transparency no?

rauchg commented 12 years ago

I think it's the subtlety

iammerrick commented 12 years ago

Sure,

border: 1px solid rgba(255, 255, 255, 0.3)

Would probably yield a similar effect or something similar.

nulltask commented 12 years ago

@guille Thanks ;)

@visionmedia First, I tried use border property. but I had some layout issue on calculating box size. then I also try outline property. but it doesn't support rounded rectangle for all browsers. box-shadow is better solution in this situation :)

iammerrick commented 12 years ago

Very cool.

rauchg commented 12 years ago

Did you try adding border and substracting from the width/height ?

rauchg commented 12 years ago

@iammerrick right but isn't the browser support of border + rgba equivalent to box-shadow ? What would be cool however is a double border declaration, so that we get the fallback easily.

iammerrick commented 12 years ago

@guille Correct. However, a straight up white border might look a bit silly on older browsers. 1 line of css instead of 3 :-)

nulltask commented 12 years ago

@iammerrick @guille Yes, it's very subtlety :)

nulltask commented 12 years ago

@guille Yeah, I tried several times. however it was too complex to me :P