Firefox absolute Position anders als Chrome

Question

Ich habe in letzter Zeit einen Fehler mit etwas Code gefunden. Im Prinzip funktioniert die Eigenschaft absolute position in Chrome korrekt, gibt aber bei Firefox andere Ergebnisse. Irgendwelche Ideen warum?

Darstellungen:

Chrome:

Firefox: HINWEIS: Bei der Darstellung firefox die zweite kleine Box vorhanden ist, aber wird abgeschnitten.

Code:

HTML:

<div id="card-info"> 
     </div> 
     <div class="arrow-wrapper"> 
      <i class=" visible-lg arrow-left pull-left fa fa-arrow-circle-o-left fa-4x" aria-hidden="true"></i> 
      <i class="visible-lg arrow-right pull-right fa fa-arrow-circle-o-right fa-4x" aria-hidden="true"></i> 
     </div> 

SCSS:

.left-arrow { 
    right: 90%; 
    left: 10%; 
} 
.right-arrow { 
    left: 90%; 
    right: 10%; 
} 
.arrow-wrapper { 
    position: absolute; 
    padding-left: 100px; 
    padding-right: 100px; 
    width: 100%; 

} 

Answer 1

dieses CSS zum absolute Element hinzufügen, da firefox eine explizite Position benötigen, wenn Sie position:absolute;

left: 0; 
right: 0; 
top: 50%; 

verwenden