Angled Border using skew with Box Shadow - FF issue

Question

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 ?

Recommended for you: Get network issues from WhatsUp Gold. Not end users.

Answer 1

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.

Angled Border using skew with Box Shadow - FF issue

Sign up