Hello, I'm currently working on creating a sliding panel of images.
While I have successfully implemented it, I am encountering some browser compatibility issues.
The sliding panel functions perfectly on Chrome desktop, however, when viewed on mobile or Safari desktop, the images seem to lose their aspect ratio and overlap with each other.
The HTML structure is quite simple:
<div class="slideshow">
<img src="...">
<img src="...">
<img src="...">
<img src="...">
<img src="...">
<img src="...">
...
</div>
The CSS/SCSS styling for the slideshow section is as follows:
.slideshow {
display: flex;
overflow-x: scroll;
height: 300px;
img {
margin-right: 1em;
height: 100%;
}
}
Here's a Live Example you can check out.
I would appreciate it if someone could test this on both Chrome desktop and Safari desktop browsers.
While Chrome should display everything correctly, Safari tends to compress all the images together.
Any suggestions for resolving this issue? Or do you know of another method that can achieve the same results across different platforms?
Thank you!