Trembling css running text animation(margin + translate) in Safari - html

Question

I made some running text animation animation in CSS same way, as it is in answer here. I tried to implement it like that to avoid any JS manipulation. And everything works fine in Chrome, but text is trembling in Safari.
.marquee {
position: relative;
overflow: hidden;
background: rgb(161, 61, 175);
color: #fff;
}
.marquee span {
display: inline-block;
min-width: 100%; /* this is to prevent shorter text animate to right */
white-space: nowrap;
font-size: 2.5em;
animation: marquee 4s ease-in-out infinite;
}
#keyframes marquee {
0% {
transform: translateX(0);
margin-left: 0;
}
10% {
transform: translateX(0);
margin-left: 0;
}
90% {
transform: translateX(-100%);
margin-left: 100%;
}
100% {
transform: translateX(-100%);
margin-left: 100%;
}
}
<h1 class="marquee">
<span>The only thing that matters now is everything You think of me</span>
</h1>
<p class="marquee">
<span>Beware of short texts!</span>
</p>
I was trying to fix that using only by using CSS, but I still cannot find the solution. Yeah, I can use JS and avoid giving animation to smaller elements. But maybe there is a way to fix this stuff for Safari with CSS only.

Answer 1

My colleague rewritten animation in that way, that it can be handled by Safari. It was obvious to us, that this trembling is caused by using translate + margin, that's why I mentioned it even in title. As you probably know, it is better to avoid margin animations. So, we added wrapper, which have opposite direction animation. Yeah, now we have 2 animations, but they are handled by browsers better, than one with both translation and margin
.marquee {
position: relative;
overflow: hidden;
background: rgb(161, 61, 175);
color: #fff;
}
.marquee-wrapper {
width: 100%;
animation: marquee-wrapper 4s ease-in-out infinite;
}
.marquee span {
display: inline-block;
min-width: 100%; /* this is to prevent shorter text animate to right */
white-space: nowrap;
font-size: 2.5em;
animation: marquee 4s ease-in-out infinite;
}
#keyframes marquee {
0% {
transform: translateX(0);
}
10% {
transform: translateX(0);
}
90% {
transform: translateX(-100%);
}
100% {
transform: translateX(-100%);
}
}
#keyframes marquee-wrapper {
0% {
transform: translateX(0);
}
10% {
transform: translateX(0);
}
90% {
transform: translateX(100%);
}
100% {
transform: translateX(100%);
}
}
<div class="marquee">
<div class="marquee-wrapper">
<span>
The only thing that matters now is everything You think of me
The only thing that matters now is everything You think of me
</span>
</div>
</div>
<br/>
<div class="marquee">
<div class="marquee-wrapper">
<span>Beware of short texts!</span>
</div>
</div>