StevieB StevieB - 4 years ago 81
CSS Question

Angled Border using skew with Box Shadow - FF issue

Trying to add an angled border to my header and then also adding a box shadow around the angled border.

Seems to work fine but on Firefox there is some white background showing around the box shadow.

Code is as follow

header {
background: #41ade5;
color: #fff;
position: relative;
z-index: 1;
padding: 45px;
}
header:after {
background: inherit;
bottom: 0;
content: '';
display: block;
height: 50%;
left: 0;
position: absolute;
right: 0;
transform: skewY(-1.5deg);
transform-origin: 100%;
z-index: -1;
box-shadow: 0px 4px 4px rgba(0,0,0,0.5)
}
body {
margin:0;
}


http://codepen.io/velnias2015/pen/KaBzrq

Looks fine on all other browsers, is there a fix for firefox ?

Answer Source

Add translateZ(1px) to fix the antialiasing issue with the transform.

transform: translateZ(1px) skewY(-1.5deg);

Render issues with transforms are common and modifying 3d transform properties are often the best way to fix them because it causes the browser to render using different methods. Other common fixes in this same vein but don't seem to apply here are: backface-visibility: hidden and perspective: 1px.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download