Firefox仅在缩放/调整窗口大小后才渲染变换的DIV

Question

该代码在JSFiddle / Chrome / IE11和下面的Snipped中很好用，但是在我的Firefox 62.0.3（64位）中，它显示不正确。角不是圆的，并且背景div的尺寸太小。我需要调整窗口大小或放大一点以使其正常工作。刷新页面后，它又恢复为错误。

那是为什么，我该怎么办？

谢谢，约翰内斯

#parent {
  position: relative;
	width: 80%;
	margin: 0 auto;
  perspective: 500px;
  padding: 30px 15px;
  color: white;
}

#background {
  position: absolute;
  height: 100%;
  width: 110%;
  top: 0;
  left: 0;
  background-color: green;
  border-radius: 10px;
  z-index: -1;
  transform: rotateY(5deg) rotateX(-1deg);
  -ms-transform: rotateY(5deg) rotateX(-1deg);
	-moz-transform: rotateY(5deg) rotateX(-1deg);
	-webkit-transform: rotateY(5deg) rotateX(-1deg);
	-o-transform: rotateY(5deg) rotateX(-1deg);
  outline: 1px solid transparent; /* antialize */
}

<div id="parent">
   The square metre (also spelled square meter, see spelling differences) is the SI derived unit of area, with symbol m²(33A1 in Unicode[1]). It is defined as the area of a square whose sides measure exactly one metre. The square metre is derived from the SI base unit of the metre, which in turn is defined as the length of the path travelled by light in absolute vacuum during a time interval of 1⁄299,792,458 of a second.

Adding SI prefixes creates multiples and submultiples; however, as the unit is squared, the order of magnitude difference between units doubles from their comparable linear units. For example, a kilometre is one thousand times the length of a metre, but a square kilometre is one million times the area of a square metre. 
  <div id="background"></div>

  </div>