ошибка с сафари, когда я использовал преобразование с точки зрения

Question

У меня возникла эта проблема с браузером Safari, когда я использовал преобразование с перспективой в родительский «родитель». эти блоки хорошо работают с Chrome и Mozilla! любая помощь? мой код и скриншот из сафари ниже

введите описание изображения здесь

.service-element {
    text-align: center;
    padding: 28px;
    perspective: 298px;
    position: absolute;
    padding-left: 56px;
    transition: all .5s ease-in-out;
    padding-bottom: 60px;
    padding-top: 60px;
}

.service-element:before {
    content: '';
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    top: 0;
    z-index: -1;
    background-color: #ffffff;
    border: solid 0.5px #e3e0e0;
    border-radius: 24px;
    transition: all .5s ease-in-out;
    box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.225);
    -webkit-transform: rotateY(-10deg);
    transform: rotateY(-10deg);
}

.service-element img {
    height: 89px;
    margin-bottom: 31px;
}

.service-element h2 {
    font-size: 22px;
    font-family: "indielabs-Frutiger-bold";
    color: #4c4c4c;
}

.service-element .paragraph {
    font-size: 14px;
    color: #959595;
    font-family: "indielabs-Frutiger-light";
}

   <div class="service-element tr">
      <img src="http://yehia.alyomhost.net/alyom-new/images/apps-icon@3x.jpg" class="img-fluid">
      <h2>تصميم تطبيقات الجوال</h2>
   <div class="paragraph">
 لوريم ابيسوم نص عشواىي هنا يوضح الشكل وليس الهدف منه المحتوي
                                        </div>