Skewed border won't display properly in FiFO on MacOs

Question

I have a problem with my page right know and could use help from the community.

I want to display a skewed border inside of a div like this: https://jsfiddle.net/kx6f9rsd/

.container {
background-color:purple;
height:100px;
width:100vw;
}

.container:before {
content: '';
position: absolute;
top: 0; 
right: 0;
border-bottom: 70px solid transparent;
border-left: 100vw solid yellow;     
width: 0;   
}

On all browsers it looks good, except for the Firefox on MacOs where it looks like this:

Is there any webkit/prefix to use when working with the MacOS Version of Firefox?

Thanks in advance!

Answer 1

Thanks for the answers so far. I fixed the problem: It also occured on the computer of my colleague on a Windows-8.1 Firefox.

It seems that Firefox has a bad antialising.

I don't know why that happened only on those two Firefox installation. To fix the antialising add the following:

-moz-transform: scale(.9999); 

So my fiddle now looks like this ( https://jsfiddle.net/mbouwemf/ ):

.container:before {
  content: '';
  position: absolute;
  top: 0; 
  right: 0;
  border-bottom: 70px solid transparent;
  border-left: 100vw solid yellow;
  width: 0; 
  -moz-transform: scale(.9999);
}

For now this worked in all browser in my company.