Проблема с transform-origin и transform: rotateX в Safari

Столкнулся с проблемой, которая заключается в кривом отображении блока с текстом.

Сам по себе блок анимированный, при клике он появляется как грань кубика. Но в Safari контент в этом блоке увеличен и размыт. Свойства этого блока задаются динамически, но если в браузере убрать свойство "transform: rotateX(0deg);", то контент отображается корректно. Либо, если убрать строчку "-86.60254037844383vh" из свойства transform-origin, то контент отображается корректно.

Код, который присваивается этому блоку после анимации, приведен ниже. Также скриншоты с Safari.

border-top-left-radius: 0px;
border-top-right-radius: 0px;
border-bottom-right-radius: 0px;
border-bottom-left-radius: 0px;
top: 0vh;
left: 0vw;
height: 100vh;
width: 100vw;
transform-origin: center center -86.60254037844383vh;
transform: rotateX(0deg);