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%}
}