I'm using key frames to change the background image of a div, so far so good, the images changes as I expect.

However, on iOS devices, when I switch to other app and go back to browser, the background images disappeared.

iOS version: 14

Tested on iPhone 7, 8, 11.

Browser tested: Chrome, Safari.

This does not happen on Android.

You can check this fiddle and test for yourself.

Any help appreciated!

CodePudding user response：

As mentioned in the comment section, I'd put them here as an answer.

Since background-image is not an animatable property, it is not recommended to put background-image in a keyframe. Instead, try to separate each image in a different div then use keyframes to control the opacity of each of them.

Opacity is one of the properties that have good cross-browser support.