Background image with using javascript not working on mobile

I have used the following code introduced by Alexandros Anoyatis, to add background images to full HTML page and it worked perfectly on both PC and mobile.

parent.document.body.style.backgroundImage = "url('image.jpg')";
parent.document.body.style.backgroundSize = "cover";
parent.document.body.style.backgroundRepeat = "no-repeat";

(link: SL3 Javascript Best Practices and Examples)

However, when I use the same code, now it is not working on mobile. May be this is due to a recent update as it was working earlier. Some of the courses that I developed last year using this above code, now not displaying the image on the mobile.

Is there any solution or updated code to achieve the same?

I need to fix the previous courses in the same manner that they were played earlier.

The below link is a sample file on SCORM Cloud.

Test file

When I open the link in PC I can see the gradient image for the background. But when I access the same link in mobile, it is just the black background.

I am using SL3 and checked on Google Chrome and Samsung Internet Browser (mobile)

Any idea to fix this?