Firefox отображает преобразованный DIV только после увеличения / изменения размера окна - PullRequest
Новая
       7

Firefox отображает преобразованный DIV только после увеличения / изменения размера окна

0 голосов
/ 13 октября 2018

этот код хорошо работает в 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>
...