CSS: Animation SlideUp unterschiedliches Ergebnis von Chrome zu Firefox

Moin Moin,

ich habe in CSS eine Slideshow nach oben erstellt, jetzt habe ich das Problem, dass es zwischen Chrome und Firefox einen Höhenunterschied beim verschieben gibt.
Bedeutet, in Chrome schiebt er es perfekt hoch wie es soll, jedoch in Firefox nicht.

HTML:

<ul class="typewriter-dynamictext" style="width:400px; line-height:50px"> 

CSS:

.typewriter {
  font-family: 'Poppins', sans-serif; 
  display: inline-block;
  position:relative;
  font-size: 40px;
  font-weight: 700;
  margin-top: -1150px;
  margin-left: 870px;
  z-index:4;
  line-height: auto;
}

.typewriter-dynamictext li{
  position:relative;
  display: inline-block;
  list-style: none;
  top:0;
  animation: slide 6s steps(4) infinite;
}

.typewriter-dynamictext li span{
    font-family:'Poppins', sans-serif; 
    justify-content: center;
    text-align:center;
    position: relative;
    display: inline-block;
    color: #000;
    letter-spacing: 2px;
    overflow:hidden;
    white-space: nowrap;
    animation: typing 1.5s steps(13, end) infinite;
    animation-timing-function: linear;
    border-right: 4px solid darkslategray;
    box-sizing: border-box;
}

@keyframes slide{
  100%{
    transform: translate(0, -200px);
  }
}

Wenn ich jetzt im Keyframe die Y -200px; auf -250px; erhöhe, passt es in Firefox aber dann in Chrome nicht. Habe schon das ganze mit -webkit probiert und auch weiter an den Werten herumgespielt. Jedoch komme ich nicht auf ein gleiches resultat in beiden Browsern.

Vielleicht hat hier jemand einen Rat.

VG Kevin