Circle text animation bugfixing - css

Question

I worked with this tutorial, and coded this:
Splitting();
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: monospace;
}
body {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background: grey;
}
.circle {
transform-style: preserve-3d;
animation: animate 8s linear infinite;
}
.circle .char {
position: absolute;
top: 0;
left: 0;
background: blue;
color: red;
font-size: 4em;
padding: 5px 12px;
border-top: 4px solid black;
border-bottom: 4px solid black;
transform-style: preserve-3d;
transform-origin: center;
transform: rotateY(calc(var(--char-index) * 12deg)) translateZ(250px);
}
#keyframes animate {
0% {
transform: perspective(1000px) rotateY(360deg) rotateX(15deg);
}
100% {
transform: perspective(1000px) rotateY(0deg) rotateX(15deg);
}
}
<script src="https://unpkg.com/splitting/dist/splitting.min.js"></script>
<div class="circle" data-splitting>
Circle-Text-Animation-Effects-
</div>
Unfortunately, I realized that it doesn't work with Chrome and Firefox. They don't show the curvature. I tried to fix it with Autoprefixer, but it didn't help. Has anyone an idea how to solve this issue?
Here is how it should look like, and how it looks like with Safari:

Answer 1

There is an extra span around your letters that need to have transform-style: preserve-3d;
Splitting();
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: monospace;
}
body {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background: grey;
}
.circle {
transform-style: preserve-3d;
animation: animate 8s linear infinite;
}
/* added this */
.circle > span {
transform-style: preserve-3d;
display: block;
}
/**/
.circle .char {
position: absolute;
top: 0;
left: 0;
background: blue;
color: red;
font-size: 4em;
padding: 5px 12px;
border-top: 4px solid black;
border-bottom: 4px solid black;
transform-style: preserve-3d;
transform-origin: center;
transform: rotateY(calc(var(--char-index) * 12deg)) translateZ(250px);
}
#keyframes animate {
0% {
transform: perspective(1000px) rotateY(360deg) rotateX(15deg);
}
100% {
transform: perspective(1000px) rotateY(0deg) rotateX(15deg);
}
}
<script src="https://unpkg.com/splitting/dist/splitting.min.js"></script>
<div class="circle" data-splitting>
Circle-Text-Animation-Effects-
</div>