Geek Answers Handbook

How to remove a strange border from a shadow in Firefox?

See this script in Firefox http://jsfiddle.net/qwbpZ/4/

When you mouse over you will see this gray line

enter image description here

This is good in Google Chrome, but this gray frame appears in other browsers. How can i solve this?

CSS

a, a:visited {color:#fff} .btn { display: inline-block; -webkit-border-radius: 8px; -moz-border-radius: 8px; border-radius: 8px; -webkit-box-shadow: 0 9px 0 #000000, 0 13px 0 rgba(0, 0, 0, 0.1); -moz-box-shadow: 0 9px 0 #000000, 0 13px 0 rgba(0, 0, 0, 0.1); box-shadow: 0 9px 0 #000000, 0 13px 0 rgba(0, 0, 0, 0.1); -webkit-transition: -webkit-box-shadow .2s ease-in-out; -moz-transition: -moz-box-shadow .2s ease-in-out; -o-transition: -o-box-shadow .2s ease-in-out; transition: box-shadow .2s ease-in-out; padding: 0px; background: black; /* see ? */ } .btn span { display: inline-block; padding: 22px 22px 11px; font-family: Arial, sans-serif; line-height: 1; text-shadow: 0 -1px 1px rgba(19,65,88,.8); background: #2e2e2e; -webkit-border-radius: 8px; -moz-border-radius: 8px; border-radius: 8px; -webkit-box-shadow: inset 0 -1px 1px rgba(255,255,255,.15); -moz-box-shadow: inset 0 -1px 1px rgba(255,255,255,.15); box-shadow: inset 0 -1px 1px rgba(255,255,255,.15); -webkit-transition: -webkit-transform .2s ease-in-out; -moz-transition: -moz-transform .2s ease-in-out; -o-transition: -o-transform .2s ease-in-out; transition: transform .2s ease-in-out; color: #FFF; font-size: 32px; border: 0 } .btn:hover { -webkit-box-shadow: 0 8px 0 #000, 0 12px 10px rgba(0,0,0,.3); -moz-box-shadow: 0 8px 0 #000, 0 12px 10px rgba(0,0,0,.3); box-shadow: 0 8px 0 #000, 0 12px 10px rgba(0,0,0,.3); } .btn:hover span { -webkit-transform: translate(0, -4px); -moz-transform: translate(0, -4px); -o-transform: translate(0, -4px); transform: translate(0, -4px); } .btn:active { -webkit-box-shadow: 0 8px 0 #000, 0 12px 10px rgba(0,0,0,.3); -moz-box-shadow: 0 8px 0 #000, 0 12px 10px rgba(0,0,0,.3); box-shadow: 0 8px 0 #000, 0 12px 10px rgba(0,0,0,.3); -webkit-transition: -webkit-box-shadow .2s ease-in-out; -moz-transition: -moz-box-shadow .2s ease-in-out; -o-transition: -o-box-shadow .2s ease-in-out; transition: box-shadow .2s ease-in-out; } .btn:active span { -webkit-transform: translate(0, 0px); -moz-transform: translate(0, 0px); -o-transform: translate(0, 0px); transform: translate(0, 0px); }
+8
css cross-browser firefox css3
source share
3 answers

There seems to be no perfect solution: these anti-alialized pixels between the shadow and the radius of the border are sticky, like hell.

So, I came up with the following two solutions:

Sadly, these are not universal solutions, and I could not find the right way to fix the error.

+6
source share

Quick fix: apply the bottom and side black frame at 1px. Button fixed: http://jsfiddle.net/FJGeZ/2/
Note that the distance from the shadow axis of the y-axis is 1px less to compensate for the lower border of 1px, plus an inner range with negative margins to overlap the parent border.

Isolated bug here: http://jsfiddle.net/AkZE6/

+1
source share

try the following:

 -moz-background-clip: padding; -webkit-background-clip: padding-box; background-clip: padding-box;
0
source share

More articles:


All Articles