Although this question was asked a while ago, I encountered the same issue recently. I am working on a slideshow that utilizes CSS transitions for slide animations. Most browsers work well with transform: translateX(-100vw) and transform: translateY(-100vh) to move slides left and up, respectively. However, Internet Explorer struggles to correctly calculate start/end positions and experiences timing issues as mentioned by @Alvaro.
To address this challenge, I opted to use absolute units (e.g., pixels) instead of relative values. Given the diverse range of screen sizes I have to accommodate, a single value won't suffice for me.
My solution involved employing a series of @media queries to establish a set of translation rules that ensure the slide consistently moves off-screen without going too far. Here is an example:
/* Slide left */
@media (max-width: 480px) {
.slide.left {
transform: translateX(-480px);
}
}
@media (min-width: 481px) and (max-width: 960px) {
.slide.left {
transform: translateX(-960px);
}
}
@media (min-width: 961px) and (max-width: 1920px) {
.slide.left {
transform: translateX(-1920px);
}
}
@media (min-width: 1921px) and (max-width: 3840px) {
.slide.left {
transform: translateX(-3840px);
}
}
@media (min-width: 3841px) {
.slide.left {
transform: translateX(-7680px);
}
}
/* Slide up */
@media (max-height: 480px) {
.slide.up {
transforom: translateX(-480px);
}
}
/* Additional queries can be added as needed */
These queries can cater to resolutions up to 8K, although the granularity may decrease at higher resolutions. Make sure to adjust them according to your specific requirements.