iOS: Storyline displays small images blurred. Device rotation clears them?

Dec 18, 2023

Hi,

I have a course here developed by a third party. Several images are blurry when displayed on an iPhone, but the images instantly become clear if you rotate the device, either from portrait to landscape or the other way. I can also clarify the images if I open and close the Menu (navigation) in the player by tapping the hamburger icon on the left.

I also tested on an iPad, which shows the same behavior. Tested in MS Edge, Google Chrome, and the Success Factors app for iOS. 

All of the above were tested from our Success Factors LMS. I did additional checks on SCORM Cloud to be sure the problem wasn't caused by Success Factors--it isn't.

I'm attaching a screen recording of an iPhone displaying the oddity.

This doesn't happen on a Windows 10 PC (Edge or Chrome), or on an Android phone (which is much older and slower than the iPhone) in Chrome.

I tried reducing the image size in PhotoShop so that the browser would no longer have to scale it. This didn't make any difference.

Suggestions?

6 Replies
Lauren Connelly

Hello Carl!

I'm happy to help. Thank you for sharing the screen recording! I have two follow-up questions:

1. Are you using markers and adding images to the markers?

2. What iOS is the iPhone using?

Lastly, if you can share the .story file that would be helpful too! You can share it in this discussion or privately in a support case. 

Steven Benassi

Hi Carl!

Sorry to hear the images from your Storyline course appear blurry when viewed on an iOS device!

I see that you shared your .story file privately through a support case. Smart move! It looks like you connected with my colleague Johnrey, who is conducting some tests. You're in great hands working one-on-one with him and should be hearing back from him shortly!

We can continue troubleshooting through your case to keep all information in one spot.

Jesse White

So it seems like the issue happens with the combination of the “rounded corner picture shape feature”, added with either the “Zoom”, or “Zoom and spin” animation filters. Fly in’s and fades are unaffected.

  • Firstly you will need to right click on the original image.
  • Then select “export shape or export picture” this will export out a flattened streamlined version of the image.
  • Take note of where you saved it and then double click the original image and navigate to the button in the “Format” window labeled “Reset Picture” and click it.
  • You then either “replace picture” with that new image (the easy way) or in some cases I’ve noticed that alignment/scaling can get wonky. In those outlier cases you will have to re-import the new image and just duplicate placement and layer filters on the new image directly mimicking the original image’s placement (The hard way).
  • For the locations pop up image types I used a specific approach where I added the map pin effect/image to the OG image's lowest State and removed the rounded corners complication.

    This doesn't answer any questions but it might provide a band-aid. cheers.