While transitioning the background-image, I noticed a difference between Chrome and Firefox. Firefox simply replaces the image instantly as expected, while Chrome adds a fade effect to the transition. Although this may be visually appealing, it introduces an unwanted functionality. How can I remove or disable this transition specifically for Chrome users?
I have searched through various search engines but have not found any solutions yet. It's possible that I am using incorrect keywords related to this topic.
To better visualize the issue, you can open the following example in different browsers:
@keyframes test {
0% {
background-image: url("https://placeimg.com/640/480/arch");
}
50% {
background-image: url("https://placeimg.com/640/480/tech");
}
100% {
background-image: url("https://placeimg.com/640/480/arch");
}
}
div {
display: block;
position: absolute;
top: 0;
left: 0;
width: 600px;
height: 300px;
background-size: cover;
background-position: center center;
animation: test 3s infinite;
}<!DOCTYPE html>
<html>
<body>
<div></div>
</body>
</html>Edit: While I appreciate workaround suggestions, I am primarily interested in understanding the root cause of this issue and finding a direct solution. Thank you for your answers on potential workarounds though.