Image Fit und Positionierung Kompatibilität über Browser

Question

Ich habe eine html/javascript/css-Seite erstellt, die Fotos in einem "Karussell" anzeigt, wo der Benutzer auf den linken und rechten Pfeil klicken kann, um das Foto zu ändern. Das Karussell selbst, der Elternteil/Behälter, ist 500px groß und 100% seines Elternteils breit. Das Bild darin sollte maximal 100% breit und maximal 100% groß sein. Mit anderen Worten, es fügt sich unabhängig vom Seitenverhältnis in das imgCarousel ein.

Dies funktioniert in den meisten Browsern. Ich habe bestätigt, dass es in IE, Edge, Chrome und Firefox funktioniert. Es funktioniert jedoch nicht in Safari. Ich persönlich habe keinen Zugang zu einem Mac, aber ich weiß, dass es in Safari nicht funktioniert, weil andere die Seite vor mir gesehen haben. Es funktioniert auch nicht in einigen Android-Browsern (obwohl es mit Android Chrome funktioniert).

Es scheint, dass in diesen Browsern, wo es nicht funktioniert, die Spitze nicht tatsächlich auf 50% festgelegt ist, aber dass die Transformation noch ordnungsgemäß funktioniert. Dies basiert auf einer visuellen Inspektion. Darüber hinaus scheint das Bild nicht richtig zu skalieren. Es erstreckt sich auf die volle Breite und die Höhe erstreckt sich über 100%;

Leider kann ich mit den Entwicklertools in keinem dieser Browser testen, da ich keinen Zugriff auf einen Mac habe und ich keine Entwickler-Tools für mobile Browser finden kann, die mit der gleichen Kapazität verwendet werden können .

Ich kann auf die betreffende Seite verlinken, wenn es sich hier nicht um eine Protokollverletzung handelt.

Ich habe einige Nachforschungen angestellt, um zu sehen, ob es Kompatibilitätsprobleme gibt, aber ich war nicht erfolgreich in dieser Forschung. Wenn jemand weiß, wie ich einen Kompatibilitäts-Fix einbauen kann, lass es mich wissen.

Vielen Dank.

.imgCarousel { 
    display: flex; 
    justify-content: space-between; 

    vertical-align: middle; 

    height: 500px; 
    background-color: black; 
    text-align: center; 
    margin: auto; 
} 

.imgCarousel img { 
    position: relative; 
    top: 50%; 
    transform: translateY(-50%); 
    -ms-transform: translateY(-50%); 
    -webkit-transform: translateY(-50%); 

    max-height: 100%; 
    max-width: 100%; 
    object-fit: contain; 

    cursor: pointer; 

} 

Answer 1

Versuchen Sie, diese Liste hinzugefügt, darunter die Oper prefix:

transform: translateY(-50%); 
    -ms-transform: translateY(-50%); 
    -webkit-transform: translateY(-50%); 
    -moz-transform: translateY(-50%); 
    -o-transform: translateY(-50%);