CODEWITHSUNDEEP
cssfirefoxborder
Nahydrin
Nahydrin

Reputation: 13507

CSS3: Jagged borders not displaying correctly in Firefox

See here: JSFiddle Demo

Here's the relevant HTML and CSS:

<div class="header"><h1>This is a header</h1></div>

.header{
    color:white;
    background-color:#2B3A48;
    text-align:center;
    height: 100px;
    position: relative;
    border-right: 5px solid rgba(0, 0, 0, 0);
    border-left: 5px solid transparent;
    margin: 0 5px;
    /*box-sizing: border-box;*/
    background-clip: padding-box;
    /*-webkit-filter: drop-shadow(rgba(0, 0, 0, 0.55) 0px 1px 2px);*/
}
.header:before, .header:after {
    content: '';
    display: block;
    position: absolute;
    bottom: 0;
    height: 100%;
    width: 22px;
    background-repeat: repeat-y;
    background-size: 22px 10px;
    z-index: 1;
}
.header:before {
    left: -5px;
    background-image: linear-gradient(-45deg, transparent 33.333%, #2B3A48 33.333%, #2B3A48 66.667%, transparent 66.667%), linear-gradient(45deg, transparent 33.333%, #2B3A48 33.333%, #2B3A48 66.667%, transparent);
    background-image: -webkit-linear-gradient(-45deg, transparent 33.333%, #2B3A48 33.333%, #2B3A48 66.667%, transparent 66.667%), -webkit-linear-gradient(45deg, transparent 33.333%, #2B3A48 33.333%, #2B3A48 66.667%, transparent);
    background-image: -moz-linear-gradient(-45deg, transparent 33.333%, #2B3A48 33.333%, #2B3A48 66.667%, transparent 66.667%), -moz-linear-gradient(45deg, transparent 33.333%, #2B3A48 33.333%, #2B3A48 66.667%, transparent);
    background-image: -o-linear-gradient(-45deg, transparent 33.333%, #2B3A48 33.333%, #2B3A48 66.667%, transparent 66.667%), -o-linear-gradient(45deg, transparent 33.333%, #2B3A48 33.333%, #2B3A48 66.667%, transparent);
}
.header:after {
    border-left: 10px solid transparent;
    right: -5px;
    background-image: linear-gradient(135deg, transparent 33.333%, #2B3A48 33.333%, #2B3A48 66.667%, transparent 66.667%), linear-gradient(-135deg, transparent 33.333%, #2B3A48 33.333%, #2B3A48 66.667%, transparent);
    background-image: -webkit-linear-gradient(135deg, transparent 33.333%, #2B3A48 33.333%, #2B3A48 66.667%, transparent 66.667%), -webkit-linear-gradient(-135deg, transparent 33.333%, #2B3A48 33.333%, #2B3A48 66.667%, transparent);
    background-image: -moz-linear-gradient(135deg, transparent 33.333%, #2B3A48 33.333%, #2B3A48 66.667%, transparent 66.667%), -moz-linear-gradient(-135deg, transparent 33.333%, #2B3A48 33.333%, #2B3A48 66.667%, transparent);
    background-image: -o-linear-gradient(135deg, transparent 33.333%, #2B3A48 33.333%, #2B3A48 66.667%, transparent 66.667%), -o-linear-gradient(-135deg, transparent 33.333%, #2B3A48 33.333%, #2B3A48 66.667%, transparent);
}

As expected the gradient works in IE10+ (is IE9/IE8 possible) and other modern browsers, see below:

jagged border

However Firefox ends up looking like this:

firefox blur

Does anyone know how to fix this?

Also, how can I convert -webkit-filter: drop-shadow(rgba(0, 0, 0, 0.55) 0px 1px 2px); to work in other browsers, if this is available in other browsers?

Upvotes: 1

Views: 197

Answers (1)

mrmoje
mrmoje

Reputation: 3732

Firefox seems to be buggy when rendering transparency for your CSS.

Luckily you can swap out transparent for #2B3A48 in the firefox-specific CSS
like so:- http://codepen.io/mrmoje/pen/dkAwE.... and voila! your artifacts are gone!

Getting -webkit-filter to work on other browsers will be tricky. At the time of this writing, only webkit and blink ( Chrome(ium), Opera, Safari et all ) are capable of the CSS filter sorcery you seek.

Gecko (firefox) currently does not support any of those.

I am not sure IE's CSS directX filters can achieve the same tho. But even if they do, they are about to be dropped in future versions of IE

A good cross-browser workaround would be to "hard code" your drop shadow in an image and serve that.

Upvotes: 1

Related Questions