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
box-shadow: 0px 4px 4px rgba(0,0,0,0.5)
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