CSS TransformY обрезает текст в Safari

Question

Мой сайт работает правильно на Chrome и Firefox.Однако в Safari есть проблема с 3D-преобразованием, которое я применил к заголовкам.Я использовал все возможные решения этой проблемы, но она все еще не работает

Код приведен ниже:

Я ожидаю, что текст будет отображаться в течение всего курса анимации, ноэто всегда обрезается и глюки.

Сайт rizandyoshi.com, если вы хотите посетить его

#main h1{
    position: absolute;
    display: block;
    top: 70%;
    width: 100%;
    text-align: center;
  font-family:'a_Concepto', cursive;
  font-size:3em;
  color: #2D2D34;
    -webkit-transform: translate3d(0, 0, 0);
    background-image: -webkit-repeating-linear-gradient(45deg, violet, indigo, blue, green, yellow, orange, red, violet);
    background-image: repeating-linear-gradient(45deg, violet, indigo, blue, green, yellow, orange, red, violet);
    transform: translateZ(7000px);
    background-size: 800% 800%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
    -webkit-animation-name: rotating;
    -webkit-animation-duration:10s ;
    -webkit-animation-iteration:infinite;
    animation: rotating 10s infinite;
    -webkit-perspective:10000;
    z-index: 7000;
}
@-webkit-keyframes rotating {
    0%{-webkit-transform: rotateY(0deg); transform: rotateY(0deg);background-position: 100% 200%;}
    25%{background-position: 200% 300%}
    50%{-webkit-transform: rotateY(360deg); transform: rotateY(360deg);background-position: 300% 400%}
    75%{background-position: 400% 500%}
    100%{-webkit-transform: rotateY(0deg); transform: rotateY(0deg);background-position: 500% 600%}
}
    @keyframes rotating {
         0%{-webkit-transform: rotateY(0deg); transform: rotateY(0deg);background-position: 100% 200%;}
    25%{background-position: 200% 300%}
    50%{-webkit-transform: rotateY(360deg); transform: rotateY(360deg);background-position: 300% 400%}
    75%{background-position: 400% 500%}
    100%{-webkit-transform: rotateY(0deg); transform: rotateY(0deg);background-position: 500% 600%}
}