I have designed a webpage using HTML, JavaScript, and CSS that features a photo carousel allowing users to navigate through images by clicking left and right arrows. The carousel's container is set at 500px tall and takes up 100% width of its parent div. The images within should adjust their size to fit within the imgCarousel without distortion based on aspect ratio.
This functionality works smoothly on most browsers including IE, Edge, Chrome, and Firefox. However, I have encountered issues with Safari on Mac systems as well as certain Android mobile browsers (excluding Chrome for Android). Users have reported that in these instances, the top alignment is not correctly set to 50%, although the transform function seems to be functioning properly. Additionally, images are not being sized appropriately, exceeding 100% height and extending beyond the intended width.
Regrettably, due to lack of access to Mac devices and limited tools for testing mobile browser compatibility, I am unable to diagnose the problem thoroughly using developer tools.
If allowed, I can provide a link to the problematic page for further investigation within this community of experts.
I have conducted research seeking solutions for compatibility issues but have yet to find a viable fix. Any suggestions or insights on how to address these browser-specific problems would be greatly appreciated.
Thank you for any assistance offered.
.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;
}